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() {
969969 // Empty state: no active thread
970970 if (!activeThread) {
971971 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">
973973 {isElectron && (
974974 <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
975975 <span className="text-xs text-muted-foreground/50">No active thread</span>
......@@ -985,7 +985,7 @@ export default function ChatView() {
985985 }
986986
987987 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">
989989 {/* Top bar */}
990990 <header
991991 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({
13041304}: ChatHeaderProps) {
13051305 return (
13061306 <>
1307 <div className="flex items-center gap-3">
1308 <h2 className="text-sm font-medium text-foreground">{activeThreadTitle}</h2>
1307 <div className="flex min-w-0 flex-1 items-center gap-3">
1308 <h2 className="truncate text-sm font-medium text-foreground" title={activeThreadTitle}>
1309 {activeThreadTitle}
1310 </h2>
13091311 {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}
13101312 </div>
1311 <div className="flex items-center gap-3">
1313 <div className="shrink-0 flex items-center gap-3">
13121314 {activeProjectName && <OpenInPicker keybindings={keybindings} />}
13131315 {activeProjectName && <GitActionsControl api={api} gitCwd={gitCwd} />}
13141316 <Button