feat(desktop): polish inline session title editing (#34607)

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -736,8 +736,9 @@ export function MessageTimeline(props: {
     if (!sessionID() || parentID()) return
     setTitle({ editing: true, draft: titleLabel() ?? "" })
     requestAnimationFrame(() => {
-      titleRef?.focus()
-      titleRef?.select()
+      if (!titleRef) return
+      titleRef.focus()
+      titleRef.select()
     })
   }
 
@@ -1369,7 +1370,7 @@ export function MessageTimeline(props: {
                   "pr-3": !settings.general.newLayoutDesigns(),
                 }}
               >
-                <div class="flex items-center min-w-0 grow-1">
+                <div class="flex items-center min-w-0 flex-1 w-full">
                   <Show when={parentID()}>
                     <button
                       type="button"
@@ -1413,9 +1414,9 @@ export function MessageTimeline(props: {
                         value={title.draft}
                         disabled={titleMutation.isPending}
                         classList={{
-                          "text-14-medium text-text-strong grow-1 min-w-0 pl-1 ml-1": true,
-                          "grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !settings.general.newLayoutDesigns(),
-                          "rounded-[6px] -ml-2 px-2 py-1 h-6 leading-4 focus:shadow-none focus:outline focus:outline-1 focus:outline-offset-[-1px] focus:outline-v2-border-border-focus":
+                          "text-14-medium text-text-strong block": true,
+                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !settings.general.newLayoutDesigns(),
+                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ":
                             settings.general.newLayoutDesigns(),
                         }}
                         style={{