Fix session title input's border offset and width
The -mx-2 trick pushed the hover/focus border noticeably left of the text, and flex-1 stretched the input across the whole header row. Tighten the offset to px-1.5/-ml-1.5 and size the input to its content via field-sizing:content instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
@@ -46,13 +46,13 @@ export function SessionTitleEditor({ sessionId, initialName }: { sessionId: numb
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<div className="-mx-2 flex items-center gap-2">
|
||||
<div className="-ml-1.5 flex items-center gap-2">
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder={`Session #${sessionId}`}
|
||||
aria-label="Session name"
|
||||
className="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-0.5 font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-border focus:border-border focus:bg-muted/30"
|
||||
className="min-w-0 max-w-full rounded-md border border-transparent bg-transparent px-1.5 py-0.5 font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-border focus:border-border focus:bg-muted/30 [field-sizing:content]"
|
||||
/>
|
||||
<div className="relative flex size-4 shrink-0 items-center justify-center">
|
||||
<Loader2
|
||||
|
||||
Reference in New Issue
Block a user