From ba7cab2c3403cd14bc1b577cedc5bb5baa3cd7a8 Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Wed, 3 Jun 2026 18:17:55 -0700
Subject: [PATCH] fix(mcp/ui): clarify per-user env var field as a hint, not a
 value

The per-user value column rendered as a plain input, so it read like a static
value shared by every user, defeating the purpose of per-user variables. Add a
persistent "Hint" addon with an explanatory tooltip, lighten the typed text,
and align the row to the top so the addon group no longer sits lower than its
neighbours and the layout stays put when the name field shows a validation
error.
---
 .../src/components/mcp_tools/EnvVarsSection.tsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx b/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
index d571017eb94..5b4a46d2fd6 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
@@ -65,7 +65,7 @@ const EnvVarsSection: React.FC = () => {
               </div>
             )}
             {fields.map(({ key, name, ...restField }) => (
-              <div key={key} className="flex gap-3 items-baseline">
+              <div key={key} className="flex gap-3 items-start">
                 <Form.Item
                   {...restField}
                   name={[name, "name"]}
@@ -97,7 +97,7 @@ const EnvVarsSection: React.FC = () => {
                   <Select options={SCOPE_OPTIONS} />
                 </Form.Item>
                 <div
-                  style={{ width: 24 }}
+                  style={{ width: 24, height: 32 }}
                   className="flex items-center justify-center"
                 >
                   <MinusCircleOutlined
@@ -134,8 +134,16 @@ const ScopedValueOrDescription: React.FC<{
     return (
       <Form.Item {...restField} name={[name, "description"]} className="mb-0">
         <Input
-          placeholder="Description shown to users, e.g. Your DB username"
-          className="rounded-md"
+          addonBefore={
+            <Tooltip title="Per-user variables have no shared value. This text is only a hint shown to each user when they fill in their own value.">
+              <span className="text-xs text-gray-500 cursor-help whitespace-nowrap">
+                <InfoCircleOutlined className="mr-1" />
+                Hint
+              </span>
+            </Tooltip>
+          }
+          placeholder="e.g. Your DB username"
+          styles={{ input: { color: "#9ca3af" } }}
         />
       </Form.Item>
     );