From fb7c5a0dee33b8d5382c94426f1b6f4358641321 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujong@berri.ai>
Date: Sun, 4 Oct 2026 20:42:29 -0700
Subject: [PATCH] fix(ui): keep search placeholders on one line and show the
 Lens run count as an input

The search placeholder truncates instead of wrapping under the icon, and
the setup search drops the square focus fill inside its rounded border.
The run count is a bordered input, so it reads as editable without a hint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/lens/setup/fields/SampleFields.tsx    | 12 +++++-------
 .../src/components/lens/setup/fields/ScopeFields.tsx |  2 +-
 .../src/components/shared/search/SearchBox.tsx       |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/lens/setup/fields/SampleFields.tsx b/ui/litellm-dashboard/src/components/lens/setup/fields/SampleFields.tsx
index cadc7b5490b..6ee482232ec 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/fields/SampleFields.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/fields/SampleFields.tsx
@@ -38,8 +38,8 @@ function RunCount({ cap, sampled, onCapChange, onBlur }: RunCountProps) {
     onBlur();
   };
   return (
-    <div className="grid justify-items-end gap-0.5">
-      <label className="flex items-baseline gap-1.5">
+    <div className="grid justify-items-end gap-1">
+      <label className="flex items-center gap-2">
         <input
           inputMode="numeric"
           aria-label="Runs to analyze"
@@ -51,12 +51,12 @@ function RunCount({ cap, sampled, onCapChange, onBlur }: RunCountProps) {
             onCapChange(capFromText(event.target.value));
           }}
           onBlur={finishTyping}
-          style={{ width: `${Math.max((shown || "All").length, 2) + 1}ch` }}
-          className="-mr-1 rounded-sm border-0 bg-transparent px-1 py-0 shadow-none focus:ring-0 text-right text-xl font-semibold tabular-nums tracking-tight outline-none hover:bg-muted/60 focus:bg-muted/60"
+          style={{ width: `${Math.max((shown || "All").length, 3) + 2}ch` }}
+          className="h-8 rounded-md border border-input bg-background px-2 py-0 text-right text-base font-semibold tabular-nums shadow-xs outline-none hover:border-ring/60 focus:border-ring focus:ring-[3px] focus:ring-ring/50 dark:bg-input/30"
         />
         <span className="text-sm text-muted-foreground">runs</span>
       </label>
-      {capped ? (
+      {capped && (
         <button
           type="button"
           aria-label="Remove cap"
@@ -66,8 +66,6 @@ function RunCount({ cap, sampled, onCapChange, onBlur }: RunCountProps) {
           Capped
           <X aria-hidden="true" className="size-3" />
         </button>
-      ) : (
-        <span className="text-xs text-muted-foreground">Type a number to cap</span>
       )}
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/lens/setup/fields/ScopeFields.tsx b/ui/litellm-dashboard/src/components/lens/setup/fields/ScopeFields.tsx
index 7da931b0d72..e22f2996d45 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/fields/ScopeFields.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/fields/ScopeFields.tsx
@@ -11,7 +11,7 @@ export function ScopeFields({ runs, range }: ScopeOptions) {
   const { control } = useFormContext<InvestigationInput>();
   const dropPicks = useDropPicks();
   return (
-    <div className="min-h-11 rounded-md border border-input py-1 shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30">
+    <div className="h-10 rounded-md border border-input shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30 [&_[data-slot=search-box-input]]:rounded-md [&_[data-slot=search-box-input]]:focus-within:bg-transparent">
       <Controller
         control={control}
         name="selection.q"
diff --git a/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx b/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
index 00951233a15..93220d0a1d6 100644
--- a/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
+++ b/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
@@ -260,7 +260,7 @@ function Input({ placeholder, busy = false, className, ...props }: SearchBoxInpu
       <div className="relative flex min-w-0 flex-1">
         <ProseMirrorDoc />
         {!text && (
-          <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center font-mono text-xs text-muted-foreground">
+          <span className="pointer-events-none absolute inset-y-0 right-0 left-0 truncate font-mono text-xs/8 text-muted-foreground">
             {placeholder}
           </span>
         )}