scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

fix(ui): keep search placeholders on one line and show the Lens run count as an input

Browse source 
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>
This commit is contained in:
Yujong Lee 2026-10-04 20:42:29 -07:00
parent 235302a4bb
commit fb7c5a0dee
3 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/litellm-dashboard/src/components/lens/setup/fields/SampleFields.tsx
View file

@ -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>
);

2
ui/litellm-dashboard/src/components/lens/setup/fields/ScopeFields.tsx
View file

@ -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"

2
ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
View file

@ -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>
)}