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

Julius Marminge committed 9 months ago

Commit 7a5dd621 parent f64c26e1 file · +7 −5Browse files

Unified · Split

apps/web/src/components/ChatView.tsx+7−5

   // 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>
   }
   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"}`}
 }: ChatHeaderProps) {
   return (
     <>
-      <div className="flex items-center gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
-        <h2 className="text-sm font-medium text-foreground">{activeThreadTitle}</h2>
+        <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