From 655b5ba82387797f13481b80a36b35d0c0d7af27 Mon Sep 17 00:00:00 2001
From: Henry Moran <virtualhenry@gmail.com>
Date: Sun, 1 Mar 2026 01:03:26 -0800
Subject: [PATCH] fix(ui): prevent session title from overflowing into drawer
 controls on mobile (#565)

packages/ui/src/components/chat/MobileSessionStatusBar.tsx
  - What: Added `min-w-0` to the title row flex container and `flex-1 min-w-0` to the session title span inside `SessionStatusHeader`.
  - Why: The flex container had `min-width: auto` (browser default), causing the title to expand beyond its constrained parent and bleed over the running/unread indicators and New button. `truncate` was a no-op without a width ceiling on the span. Fixes #556.
---
 packages/ui/src/components/chat/MobileSessionStatusBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/chat/MobileSessionStatusBar.tsx b/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
index d43b57ef..bff4e303 100644
--- a/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
+++ b/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
@@ -446,8 +446,8 @@ function SessionStatusHeader({
           <div className="w-full h-px bg-[var(--interactive-border)] my-1" />
         </div>
       )}
-      <div className="flex items-center gap-1.5">
-        <span className="text-[13px] text-[var(--surface-foreground)] truncate leading-none">
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span className="flex-1 min-w-0 text-[13px] text-[var(--surface-foreground)] truncate leading-none">
           {currentSessionTitle}
         </span>
         {childIndicators.length > 0 && (