diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx index 1d4185b9092f..7af46f2d47a2 100644 --- a/apps/web/src/components/BranchToolbarBranchSelector.tsx +++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx @@ -779,7 +779,11 @@ export function BranchToolbarBranchSelector({ )} /> - + {displayMode !== "panel" ? ( diff --git a/apps/web/src/components/ComposerContextLabel.tsx b/apps/web/src/components/ComposerContextLabel.tsx index 1abecfdf8ca8..8efcba43a75c 100644 --- a/apps/web/src/components/ComposerContextLabel.tsx +++ b/apps/web/src/components/ComposerContextLabel.tsx @@ -1,6 +1,7 @@ import type { ReactNode } from "react"; import { cn } from "../lib/utils"; +import { THREAD_DETAILS_PANEL_LABEL_CLASS } from "./chat/threadDetailsPanelStyles"; /** Keeps text measurable while the composer's outer label box collapses. */ export function ComposerContextLabel({ @@ -16,7 +17,7 @@ export function ComposerContextLabel({ className={cn( "min-w-0", displayMode === "panel" - ? "flex-1 truncate text-left" + ? "flex-1 overflow-x-clip overflow-y-visible text-left" : "max-w-[240px] group-data-[compact]/composer-context:max-w-0", )} > @@ -24,6 +25,7 @@ export function ComposerContextLabel({ data-composer-label-motion className={cn( "block w-full min-w-0 truncate", + displayMode === "panel" && THREAD_DETAILS_PANEL_LABEL_CLASS, displayMode === "toolbar" && "max-w-[240px] transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none", )} diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx index cfe45ff24cc4..855eeaaa38b0 100644 --- a/apps/web/src/components/GitActionsControl.tsx +++ b/apps/web/src/components/GitActionsControl.tsx @@ -126,6 +126,7 @@ import { type DraftId, useComposerDraftStore } from "~/composerDraftStore"; import { THREAD_DETAILS_PANEL_CHEVRON_CLASS, THREAD_DETAILS_PANEL_ICON_CLASS, + THREAD_DETAILS_PANEL_LABEL_CLASS, THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS, THREAD_DETAILS_PANEL_SPLIT_SEPARATOR_CLASS, } from "./chat/threadDetailsPanelStyles"; @@ -432,23 +433,25 @@ function GitActionProgressButtonContent({ aria-live="polite" className={cn( "grid min-w-0 flex-1 items-center", - // Pin the title row to the button's minimum content height (min-height - // minus vertical padding and border) so revealing the output row - // extends the button downward without re-centering — the title must - // not shift. No row gap: the collapsed output row must contribute zero - // height so the single-line running button matches the static button - // exactly. The panel column gap matches the static row's icon-to-label - // distance (gap-2.5 plus the label's ml-0.5). In the panel the elapsed - // counter renders outside the button (in the menu-chevron slot), so - // there is no trailing column. + // Pin the title row to the button's minimum content height so output + // expands below it. Panel controls leave 24px after padding and border. + // No row gap: collapsed output must not add height. The panel's elapsed + // counter uses the menu-chevron slot, so it has no trailing column. isPanel - ? "grid-cols-[auto_minmax(0,1fr)] grid-rows-[1.75rem] gap-x-3" + ? "grid-cols-[auto_minmax(0,1fr)] grid-rows-[1.5rem] gap-x-3" : "grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[1.25rem] gap-x-2.5 sm:grid-rows-[1rem]", )} role="status" >