authorgravatar for 46866023+GuilhermeVieiraDev@users.noreply.github.comGuilherme Vieira <46866023+GuilhermeVieiraDev@users.noreply.github.com> 2026-03-27 04:47:57+00:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-26 21:47:57-07:00
log02989fe600c2aff728b09c5600f75a3a073b3468
tree3d44faad666be9e5ce1d082515d22d3fd2f74f86
parent648f0676bde993ae64e57d2e2ccd2e797803de32
signature Signed by PGP key B5690EEEBB952194

fix(web): improve chat header badge and title flex distribution (#1309)

4 files changed, 12 insertions(+), 12 deletions(-)

apps/web/src/components/GitActionsControl.tsx+3-3
......@@ -765,7 +765,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
765765 }
766766 >
767767 <GitQuickActionIcon quickAction={quickAction} />
768 <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
768 <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
769769 {quickAction.label}
770770 </span>
771771 </PopoverTrigger>
......@@ -781,12 +781,12 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
781781 onClick={runQuickAction}
782782 >
783783 <GitQuickActionIcon quickAction={quickAction} />
784 <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
784 <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
785785 {quickAction.label}
786786 </span>
787787 </Button>
788788 )}
789 <GroupSeparator className="hidden @sm/header-actions:block" />
789 <GroupSeparator className="hidden @3xl/header-actions:block" />
790790 <Menu
791791 onOpenChange={(open) => {
792792 if (open) void invalidateGitQueries(queryClient);
apps/web/src/components/ProjectScriptsControl.tsx+3-3
......@@ -277,11 +277,11 @@ export default function ProjectScriptsControl({
277277 title={`Run ${primaryScript.name}`}
278278 >
279279 <ScriptIcon icon={primaryScript.icon} />
280 <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
280 <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
281281 {primaryScript.name}
282282 </span>
283283 </Button>
284 <GroupSeparator className="hidden @sm/header-actions:block" />
284 <GroupSeparator className="hidden @3xl/header-actions:block" />
285285 <Menu highlightItemOnHover={false}>
286286 <MenuTrigger
287287 render={<Button size="icon-xs" variant="outline" aria-label="Script actions" />}
......@@ -342,7 +342,7 @@ export default function ProjectScriptsControl({
342342 ) : (
343343 <Button size="xs" variant="outline" onClick={openAddDialog} title="Add action">
344344 <PlusIcon className="size-3.5" />
345 <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
345 <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
346346 Add action
347347 </span>
348348 </Button>
apps/web/src/components/chat/ChatHeader.tsx+4-4
......@@ -62,7 +62,7 @@ export const ChatHeader = memo(function ChatHeader({
6262 onToggleDiff,
6363}: ChatHeaderProps) {
6464 return (
65 <div className="flex min-w-0 flex-1 items-center gap-2">
65 <div className="@container/header-actions flex min-w-0 flex-1 items-center gap-2">
6666 <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
6767 <SidebarTrigger className="size-7 shrink-0 md:hidden" />
6868 <h2
......@@ -72,8 +72,8 @@ export const ChatHeader = memo(function ChatHeader({
7272 {activeThreadTitle}
7373 </h2>
7474 {activeProjectName && (
75 <Badge variant="outline" className="min-w-0 shrink truncate">
76 {activeProjectName}
75 <Badge variant="outline" className="min-w-0 shrink overflow-hidden">
76 <span className="min-w-0 truncate">{activeProjectName}</span>
7777 </Badge>
7878 )}
7979 {activeProjectName && !isGitRepo && (
......@@ -82,7 +82,7 @@ export const ChatHeader = memo(function ChatHeader({
8282 </Badge>
8383 )}
8484 </div>
85 <div className="@container/header-actions flex min-w-0 flex-1 items-center justify-end gap-2 @sm/header-actions:gap-3">
85 <div className="flex shrink-0 items-center justify-end gap-2 @3xl/header-actions:gap-3">
8686 {activeProjectScripts && (
8787 <ProjectScriptsControl
8888 scripts={activeProjectScripts}
apps/web/src/components/chat/OpenInPicker.tsx+2-2
......@@ -111,11 +111,11 @@ export const OpenInPicker = memo(function OpenInPicker({
111111 onClick={() => openInEditor(preferredEditor)}
112112 >
113113 {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
114 <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
114 <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
115115 Open
116116 </span>
117117 </Button>
118 <GroupSeparator className="hidden @sm/header-actions:block" />
118 <GroupSeparator className="hidden @3xl/header-actions:block" />
119119 <Menu>
120120 <MenuTrigger render={<Button aria-label="Copy options" size="icon-xs" variant="outline" />}>
121121 <ChevronDownIcon aria-hidden="true" className="size-4" />