Skip to content

fix(web): prevent chat metadata overlap #8851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 3 commits into from
Aug 31, 2026
Merged

fix(web): prevent chat metadata overlap #8851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c783c3
fix(web): prevent chat metadata overlap
MatthewFeroz Aug 31, 2026
ab65489
fix(web): preserve chat header focus rings
MatthewFeroz Aug 31, 2026
b173986
fix(web): keep chat breadcrumb context visible
MatthewFeroz Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions apps/web/src/components/BranchToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,8 +265,10 @@ function useLabelsOverflow(element: HTMLDivElement | null): boolean {
let needed = 0;
let groups = 0;
for (const child of current.children) {
if (!(child instanceof HTMLElement) || child.offsetWidth <= 1) continue;
needed += contentWidth(child);
if (!(child instanceof HTMLElement)) continue;
const width = contentWidth(child);
if (width <= 1) continue;
needed += width;
groups += 1;
}
needed += stripGap * Math.max(0, groups - 1);
Expand Down Expand Up @@ -356,7 +358,7 @@ function useLabelsOverflow(element: HTMLDivElement | null): boolean {
// Label widths can change without the strip box moving (font family or
// size preferences), so re-measure on every render as well as on resize
// and font loads.
useEffect(() => {
useLayoutEffect(() => {
measure();
});

Expand Down Expand Up @@ -487,7 +489,7 @@ export const BranchToolbar = memo(function BranchToolbar({
onUsePreviousWorktree={onUsePreviousWorktree}
/>
) : (
<div className="flex min-w-0 flex-1 items-center gap-1">
<div className="flex min-w-10 flex-1 items-center gap-1">
{showEnvironmentIndicator && availableEnvironments && (
<>
<BranchToolbarEnvironmentSelector
Expand Down Expand Up @@ -520,7 +522,7 @@ export const BranchToolbar = memo(function BranchToolbar({

{showGitControls ? (
<BranchToolbarBranchSelector
className="min-w-0 flex-1 justify-end md:ml-auto md:flex-none"
className="min-w-0 flex-1 justify-end md:ml-auto md:flex-initial"
environmentId={environmentId}
threadId={threadId}
{...(draftId ? { draftId } : {})}
Expand Down
23 changes: 14 additions & 9 deletions apps/web/src/components/BranchToolbarEnvModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,25 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
if (envLocked) {
return (
<span
className="inline-flex h-7 shrink-0 items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs"
className="inline-flex h-7 min-w-0 items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs"
data-composer-context-control
>
{activeWorktreePath ? (
<>
<FolderGitIcon className="size-3" />
{resolveLockedWorkspaceLabel(activeWorktreePath)}
</>
<FolderGitIcon className="size-3 shrink-0" />
) : (
<>
<FolderIcon className="size-3" />
{resolveLockedWorkspaceLabel(activeWorktreePath)}
</>
<FolderIcon className="size-3 shrink-0" />
)}
<span
data-composer-label
className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] origin-left truncate transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:[transform:translateX(-0.25rem)_scaleX(0.95)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transform-none motion-reduce:transition-opacity"
>
{resolveLockedWorkspaceLabel(activeWorktreePath)}
</span>
</span>
</span>
);
}
Expand Down
11 changes: 7 additions & 4 deletions apps/web/src/components/chat/ChatHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,21 +288,24 @@ export const ChatHeader = memo(function ChatHeader({
className="@container/header-actions flex min-w-0 flex-1 items-center gap-2 sm:gap-3"
onContextMenu={handleHeaderContextMenu}
>
<WorkspaceBreadcrumb ariaLabel="Thread breadcrumb" className="flex-1">
<WorkspaceBreadcrumb
ariaLabel="Thread breadcrumb"
className="flex-1 overflow-clip [overflow-clip-margin:2px]"
>
{/* The project always leads the header: knowing which project a
thread lives in is priority zero, and the thread title alone
doesn't answer it. */}
{activeProjectName ? (
<>
<WorkspaceBreadcrumbItem>
<WorkspaceBreadcrumbItem className="shrink">
<Tooltip>
<TooltipTrigger
render={
<button
type="button"
aria-label={`New thread in ${activeProjectName}`}
onClick={onNewThreadInProject}
className="inline-flex min-w-0 cursor-pointer items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
className="inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
/>
}
>
Expand All @@ -320,7 +323,7 @@ export const ChatHeader = memo(function ChatHeader({
<WorkspaceBreadcrumbSeparator />
</>
) : null}
<WorkspaceBreadcrumbItem current className="flex-1">
<WorkspaceBreadcrumbItem current className="min-w-10 flex-1">
{renamingTitle !== null ? (
<input
autoFocus
Expand Down
Loading