authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-16 11:09:43-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-17 16:05:59-08:00
log7a5dd62d2f799bd41982eeae04eb24a97c0a7430
tree523bc9bd0b6872fce9b2f634301d851290f97051
parentf64c26e7086c6610321214ccd33727991b676b5a

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

1 files changed, 7 insertions(+), 5 deletions(-)

apps/web/src/components/ChatView.tsx+7-5
...@@ -969,7 +969,7 @@ export default function ChatView() {...@@ -969,7 +969,7 @@ export default function ChatView() {
969 // Empty state: no active thread969 // Empty state: no active thread
970 if (!activeThread) {970 if (!activeThread) {
971 return (971 return (
972 <div className="flex min-h-0 flex-1 flex-col bg-background text-muted-foreground/40">972 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-muted-foreground/40">
973 {isElectron && (973 {isElectron && (
974 <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">974 <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
975 <span className="text-xs text-muted-foreground/50">No active thread</span>975 <span className="text-xs text-muted-foreground/50">No active thread</span>
...@@ -985,7 +985,7 @@ export default function ChatView() {...@@ -985,7 +985,7 @@ export default function ChatView() {
985 }985 }
986986
987 return (987 return (
988 <div className="flex min-h-0 flex-1 flex-col bg-background">988 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
989 {/* Top bar */}989 {/* Top bar */}
990 <header990 <header
991 className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}991 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({...@@ -1304,11 +1304,13 @@ const ChatHeader = memo(function ChatHeader({
1304}: ChatHeaderProps) {1304}: ChatHeaderProps) {
1305 return (1305 return (
1306 <>1306 <>
1307 <div className="flex items-center gap-3">1307 <div className="flex min-w-0 flex-1 items-center gap-3">
1308 <h2 className="text-sm font-medium text-foreground">{activeThreadTitle}</h2>1308 <h2 className="truncate text-sm font-medium text-foreground" title={activeThreadTitle}>
1309 {activeThreadTitle}
1310 </h2>
1309 {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}1311 {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}
1310 </div>1312 </div>
1311 <div className="flex items-center gap-3">1313 <div className="shrink-0 flex items-center gap-3">
1312 {activeProjectName && <OpenInPicker keybindings={keybindings} />}1314 {activeProjectName && <OpenInPicker keybindings={keybindings} />}
1313 {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}1315 {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}
1314 <Button1316 <Button