| author |  Guilherme Vieira <46866023+GuilhermeVieiraDev@users.noreply.github.com> 2026-03-27 04:47:57+00:00 |
| committer |  GitHub <noreply@github.com> 2026-03-26 21:47:57-07:00 |
| log | 02989fe600c2aff728b09c5600f75a3a073b3468 |
| tree | 3d44faad666be9e5ce1d082515d22d3fd2f74f86 |
| parent | 648f0676bde993ae64e57d2e2ccd2e797803de32 |
| 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
apps/web/src/components/GitActionsControl.tsx+3-3
| ... | @@ -765,7 +765,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions | ... | @@ -765,7 +765,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions |
| 765 | } | 765 | } |
| 766 | > | 766 | > |
| 767 | <GitQuickActionIcon quickAction={quickAction} /> | 767 | <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"> |
| 769 | {quickAction.label} | 769 | {quickAction.label} |
| 770 | </span> | 770 | </span> |
| 771 | </PopoverTrigger> | 771 | </PopoverTrigger> |
| ... | @@ -781,12 +781,12 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions | ... | @@ -781,12 +781,12 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions |
| 781 | onClick={runQuickAction} | 781 | onClick={runQuickAction} |
| 782 | > | 782 | > |
| 783 | <GitQuickActionIcon quickAction={quickAction} /> | 783 | <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"> |
| 785 | {quickAction.label} | 785 | {quickAction.label} |
| 786 | </span> | 786 | </span> |
| 787 | </Button> | 787 | </Button> |
| 788 | )} | 788 | )} |
| 789 | <GroupSeparator className="hidden @sm/header-actions:block" /> | 789 | <GroupSeparator className="hidden @3xl/header-actions:block" /> |
| 790 | <Menu | 790 | <Menu |
| 791 | onOpenChange={(open) => { | 791 | onOpenChange={(open) => { |
| 792 | if (open) void invalidateGitQueries(queryClient); | 792 | if (open) void invalidateGitQueries(queryClient); |
apps/web/src/components/ProjectScriptsControl.tsx+3-3
| ... | @@ -277,11 +277,11 @@ export default function ProjectScriptsControl({ | ... | @@ -277,11 +277,11 @@ export default function ProjectScriptsControl({ |
| 277 | title={`Run ${primaryScript.name}`} | 277 | title={`Run ${primaryScript.name}`} |
| 278 | > | 278 | > |
| 279 | <ScriptIcon icon={primaryScript.icon} /> | 279 | <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"> |
| 281 | {primaryScript.name} | 281 | {primaryScript.name} |
| 282 | </span> | 282 | </span> |
| 283 | </Button> | 283 | </Button> |
| 284 | <GroupSeparator className="hidden @sm/header-actions:block" /> | 284 | <GroupSeparator className="hidden @3xl/header-actions:block" /> |
| 285 | <Menu highlightItemOnHover={false}> | 285 | <Menu highlightItemOnHover={false}> |
| 286 | <MenuTrigger | 286 | <MenuTrigger |
| 287 | render={<Button size="icon-xs" variant="outline" aria-label="Script actions" />} | 287 | render={<Button size="icon-xs" variant="outline" aria-label="Script actions" />} |
| ... | @@ -342,7 +342,7 @@ export default function ProjectScriptsControl({ | ... | @@ -342,7 +342,7 @@ export default function ProjectScriptsControl({ |
| 342 | ) : ( | 342 | ) : ( |
| 343 | <Button size="xs" variant="outline" onClick={openAddDialog} title="Add action"> | 343 | <Button size="xs" variant="outline" onClick={openAddDialog} title="Add action"> |
| 344 | <PlusIcon className="size-3.5" /> | 344 | <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"> |
| 346 | Add action | 346 | Add action |
| 347 | </span> | 347 | </span> |
| 348 | </Button> | 348 | </Button> |
apps/web/src/components/chat/ChatHeader.tsx+4-4
| ... | @@ -62,7 +62,7 @@ export const ChatHeader = memo(function ChatHeader({ | ... | @@ -62,7 +62,7 @@ export const ChatHeader = memo(function ChatHeader({ |
| 62 | onToggleDiff, | 62 | onToggleDiff, |
| 63 | }: ChatHeaderProps) { | 63 | }: ChatHeaderProps) { |
| 64 | return ( | 64 | 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"> |
| 66 | <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3"> | 66 | <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3"> |
| 67 | <SidebarTrigger className="size-7 shrink-0 md:hidden" /> | 67 | <SidebarTrigger className="size-7 shrink-0 md:hidden" /> |
| 68 | <h2 | 68 | <h2 |
| ... | @@ -72,8 +72,8 @@ export const ChatHeader = memo(function ChatHeader({ | ... | @@ -72,8 +72,8 @@ export const ChatHeader = memo(function ChatHeader({ |
| 72 | {activeThreadTitle} | 72 | {activeThreadTitle} |
| 73 | </h2> | 73 | </h2> |
| 74 | {activeProjectName && ( | 74 | {activeProjectName && ( |
| 75 | <Badge variant="outline" className="min-w-0 shrink truncate"> | 75 | <Badge variant="outline" className="min-w-0 shrink overflow-hidden"> |
| 76 | {activeProjectName} | 76 | <span className="min-w-0 truncate">{activeProjectName}</span> |
| 77 | </Badge> | 77 | </Badge> |
| 78 | )} | 78 | )} |
| 79 | {activeProjectName && !isGitRepo && ( | 79 | {activeProjectName && !isGitRepo && ( |
| ... | @@ -82,7 +82,7 @@ export const ChatHeader = memo(function ChatHeader({ | ... | @@ -82,7 +82,7 @@ export const ChatHeader = memo(function ChatHeader({ |
| 82 | </Badge> | 82 | </Badge> |
| 83 | )} | 83 | )} |
| 84 | </div> | 84 | </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"> |
| 86 | {activeProjectScripts && ( | 86 | {activeProjectScripts && ( |
| 87 | <ProjectScriptsControl | 87 | <ProjectScriptsControl |
| 88 | scripts={activeProjectScripts} | 88 | scripts={activeProjectScripts} |
apps/web/src/components/chat/OpenInPicker.tsx+2-2
| ... | @@ -111,11 +111,11 @@ export const OpenInPicker = memo(function OpenInPicker({ | ... | @@ -111,11 +111,11 @@ export const OpenInPicker = memo(function OpenInPicker({ |
| 111 | onClick={() => openInEditor(preferredEditor)} | 111 | onClick={() => openInEditor(preferredEditor)} |
| 112 | > | 112 | > |
| 113 | {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />} | 113 | {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"> |
| 115 | Open | 115 | Open |
| 116 | </span> | 116 | </span> |
| 117 | </Button> | 117 | </Button> |
| 118 | <GroupSeparator className="hidden @sm/header-actions:block" /> | 118 | <GroupSeparator className="hidden @3xl/header-actions:block" /> |
| 119 | <Menu> | 119 | <Menu> |
| 120 | <MenuTrigger render={<Button aria-label="Copy options" size="icon-xs" variant="outline" />}> | 120 | <MenuTrigger render={<Button aria-label="Copy options" size="icon-xs" variant="outline" />}> |
| 121 | <ChevronDownIcon aria-hidden="true" className="size-4" /> | 121 | <ChevronDownIcon aria-hidden="true" className="size-4" /> |