From 7a5dd62d2f799bd41982eeae04eb24a97c0a7430 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 16 Feb 2026 11:09:43 -0800
Subject: [PATCH] Prevent ChatView header overflow with long thread titles

- add `min-w-0` to ChatView container wrappers to allow proper flex shrinking
- make thread title truncatable with `truncate` and `title` tooltip
- keep action controls fixed-width with `shrink-0` to preserve header layout
---
 apps/web/src/components/ChatView.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 382d30b53664880cbf5e3d48dc15a82606088085..31b0204f90f378b3c4550e997686ae87d8654f58 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -969,7 +969,7 @@ export default function ChatView() {
   // Empty state: no active thread
   if (!activeThread) {
     return (
-      <div className="flex min-h-0 flex-1 flex-col bg-background text-muted-foreground/40">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-muted-foreground/40">
         {isElectron && (
           <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
             <span className="text-xs text-muted-foreground/50">No active thread</span>
@@ -985,7 +985,7 @@ export default function ChatView() {
   }
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col bg-background">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
       {/* Top bar */}
       <header
         className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}
@@ -1304,11 +1304,13 @@ const ChatHeader = memo(function ChatHeader({
 }: ChatHeaderProps) {
   return (
     <>
-      <div className="flex items-center gap-3">
-        <h2 className="text-sm font-medium text-foreground">{activeThreadTitle}</h2>
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <h2 className="truncate text-sm font-medium text-foreground" title={activeThreadTitle}>
+          {activeThreadTitle}
+        </h2>
         {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}
       </div>
-      <div className="flex items-center gap-3">
+      <div className="shrink-0 flex items-center gap-3">
         {activeProjectName && <OpenInPicker keybindings={keybindings} />}
         {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}
         <Button
-- 
2.54.0