From 7bf4b3d4bf61b5a05017811e7ee6ac480e84a2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 30 Aug 2026 20:52:44 +0200
Subject: [PATCH] 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
---
 app/(app)/sessions/[id]/page.tsx           | 4 ++--
 components/sessions/SessionTitleEditor.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/(app)/sessions/[id]/page.tsx b/app/(app)/sessions/[id]/page.tsx
index aa39946..cb2d3e3 100644
--- a/app/(app)/sessions/[id]/page.tsx
+++ b/app/(app)/sessions/[id]/page.tsx
@@ -36,7 +36,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 flex-1">
           <SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} />
-          <p className="mt-1 px-2 text-sm text-muted-foreground">
+          <p className="mt-1 px-1.5 text-sm text-muted-foreground">
             {detail.session.status} · {formatDuration(detail.session.durationMs)}
             {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
               <> · replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
@@ -50,7 +50,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
             )}
           </p>
           {detail.session.description && (
-            <p className="mt-1 px-2 text-sm text-muted-foreground">{detail.session.description}</p>
+            <p className="mt-1 px-1.5 text-sm text-muted-foreground">{detail.session.description}</p>
           )}
         </div>
         {canReplay && (
diff --git a/components/sessions/SessionTitleEditor.tsx b/components/sessions/SessionTitleEditor.tsx
index 7830876..46baa6e 100644
--- a/components/sessions/SessionTitleEditor.tsx
+++ b/components/sessions/SessionTitleEditor.tsx
@@ -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