From 745379e401f40422451098f57e563c14681404e9 Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Wed, 20 May 2026 15:26:24 -0700
Subject: [PATCH] refactor: improve env vars editor layout and copy in MCP
 modal

- Replace antd Space with flex div in EnvVarsSection for more reliable
  column alignment between header and rows
- Use explicit flex styles on name/value Form.Items so columns line up
  with the Scope and remove-button columns
- Shorten "Per-user field" option label to "Per-user" and update
  disabled value placeholder to "Defined per user" for clarity
- Tweak FillUserFieldsModal description copy to better introduce the
  list of required per-user credentials
---
 ui/litellm-dashboard/package-lock.json        | 30 ++--------------
 .../mcp_tools/mock/EnvVarsSection.tsx         | 34 ++++++++++---------
 .../mcp_tools/mock/FillUserFieldsModal.tsx    |  2 +-
 3 files changed, 21 insertions(+), 45 deletions(-)

diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json
index b33b2a69bee..2a4faba05af 100644
--- a/ui/litellm-dashboard/package-lock.json
+++ b/ui/litellm-dashboard/package-lock.json
@@ -1937,9 +1937,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1956,9 +1953,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1975,9 +1969,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1994,9 +1985,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -13349,8 +13337,9 @@
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "extraneous": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -13364,21 +13353,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
-      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mock/EnvVarsSection.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mock/EnvVarsSection.tsx
index f12cd12e80c..5386f47be44 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mock/EnvVarsSection.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mock/EnvVarsSection.tsx
@@ -3,7 +3,7 @@
 // caller can persist the values to localStorage on submit.
 
 import React from "react";
-import { Form, Input, Select, Space, Button, Tooltip, Tag, Typography } from "antd";
+import { Form, Input, Select, Button, Tooltip, Tag, Typography } from "antd";
 import {
   InfoCircleOutlined,
   MinusCircleOutlined,
@@ -57,16 +57,12 @@ const EnvVarsSection: React.FC = () => {
               </div>
             )}
             {fields.map(({ key, name, ...restField }) => (
-              <Space
-                key={key}
-                className="flex w-full"
-                align="baseline"
-                size="middle"
-              >
+              <div key={key} className="flex gap-3 items-baseline">
                 <Form.Item
                   {...restField}
                   name={[name, "name"]}
-                  className="flex-1 mb-0"
+                  className="mb-0"
+                  style={{ flex: 1 }}
                   rules={[
                     {
                       pattern: /^[A-Z_][A-Z0-9_]*$/,
@@ -83,7 +79,8 @@ const EnvVarsSection: React.FC = () => {
                 <Form.Item
                   {...restField}
                   name={[name, "value"]}
-                  className="flex-1 mb-0"
+                  className="mb-0"
+                  style={{ flex: 1 }}
                   shouldUpdate
                 >
                   <ValueField fieldName={name} />
@@ -98,15 +95,20 @@ const EnvVarsSection: React.FC = () => {
                   <Select
                     options={[
                       { value: "global", label: "Global" },
-                      { value: "per_user", label: "Per-user field" },
+                      { value: "per_user", label: "Per-user" },
                     ]}
                   />
                 </Form.Item>
-                <MinusCircleOutlined
-                  onClick={() => remove(name)}
-                  className="text-gray-500 hover:text-red-500 cursor-pointer"
-                />
-              </Space>
+                <div
+                  style={{ width: 24 }}
+                  className="flex items-center justify-center"
+                >
+                  <MinusCircleOutlined
+                    onClick={() => remove(name)}
+                    className="text-gray-500 hover:text-red-500 cursor-pointer"
+                  />
+                </div>
+              </div>
             ))}
             <Button
               type="dashed"
@@ -137,7 +139,7 @@ const ValueField: React.FC<{
       value={value ?? ""}
       onChange={(e) => onChange?.(e.target.value)}
       placeholder={
-        isPerUser ? "set by each user" : "e.g. postgresql"
+        isPerUser ? "Defined per user" : "e.g. postgresql"
       }
       disabled={isPerUser}
       className="rounded-md font-mono"
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mock/FillUserFieldsModal.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mock/FillUserFieldsModal.tsx
index bd4a224b533..c2c6c67c443 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mock/FillUserFieldsModal.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mock/FillUserFieldsModal.tsx
@@ -90,7 +90,7 @@ const FillUserFieldsModal: React.FC<FillUserFieldsModalProps> = ({
           <>
             <Text className="text-sm text-gray-600 block">
               These values are private to you. Your admin configured this MCP
-              server to require per-user credentials.
+              server to require these per-user credentials:
             </Text>
             <Form layout="vertical">
               {perUserDefs.map((d) => (