Unify inline-editable field styling app-wide
Device display name, session title, and session description editors now share one style: underline is invisible until hover/focus (then primary), the caret is primary while editing, and text keeps its own default color at all times instead of shifting on focus. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
@@ -60,7 +60,7 @@ export function SessionDescriptionEditor({
|
||||
placeholder="Add a description..."
|
||||
aria-label="Session description"
|
||||
rows={1}
|
||||
className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-border focus:border-b-foreground/40 focus:text-foreground sm:max-w-xl [field-sizing:content]"
|
||||
className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
|
||||
/>
|
||||
<div className="relative mt-0.5 flex size-4 shrink-0 items-center justify-center">
|
||||
<Loader2
|
||||
|
||||
@@ -52,7 +52,7 @@ export function SessionTitleEditor({ sessionId, initialName }: { sessionId: numb
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder={`Session #${sessionId}`}
|
||||
aria-label="Session name"
|
||||
className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-border focus:border-b-foreground/40 sm:max-w-xl [field-sizing:content]"
|
||||
className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
|
||||
/>
|
||||
<div className="relative flex size-4 shrink-0 items-center justify-center">
|
||||
<Loader2
|
||||
|
||||
Reference in New Issue
Block a user