fix(ui): task-chat pane-tab underline hugs the properties header's bottom border

The Properties/Plan/Artifacts strip portaled into the pane header floated
its active underline ~6px above the header's border-b (list padding + the
bar's py-2). Move the bar's vertical padding onto the window-controls
cluster, stretch the portaled strip to the header's full height, and pin
the trigger underline to bottom-0 so it sits on the border line.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
scotttongandClaude Fable 5 committed 2026-08-07 16:55:49 -07:00
1 parent af4b0280d2
commit 0851608168
2 files changed
+28 -7

No files matched your search

+5 -3
View File
@@ -355,13 +355,15 @@ function ResizablePropertiesPanel({
>
{/* The slot hosts whatever IssueProperties portals in — the tab strip
when Plan/Artifacts have content, else a plain "Properties" title;
window controls sit right. */}
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-border">
window controls sit right. Vertical padding lives on the controls
cluster, not the bar, so the tab strip can stretch to the border
and its active underline hugs the header's bottom line. */}
<div className="flex items-center justify-between gap-2 px-4 border-b border-border">
<div
id={PROPERTIES_PANE_HEADER_SLOT_ID}
className="flex min-w-0 flex-1 items-center self-stretch"
/>
<div className="flex items-center gap-1">
<div className="flex items-center gap-1 py-2">
<Button
variant="ghost"
size="icon-xs"
@@ -2513,14 +2513,33 @@ export function IssueProperties({
(paneTab === "plans" && !hasPlanTab) || (paneTab === "artifacts" && !hasArtifactsTab)
? "properties"
: paneTab;
// In the pane header the strip stretches to the bar's full height and the
// active underline drops to bottom-0, so it hugs the header's border line.
const paneTabTriggerClass = paneHeaderSlot
? "h-full group-data-[orientation=horizontal]/tabs:after:bottom-0"
: undefined;
const tabStrip = (
<TabsList
variant="line"
className={paneHeaderSlot ? "justify-start gap-1" : "w-full justify-start gap-1"}
className={
paneHeaderSlot
? "items-stretch justify-start gap-1 p-0 group-data-[orientation=horizontal]/tabs:h-full"
: "w-full justify-start gap-1"
}
>
<TabsTrigger value="properties">Properties</TabsTrigger>
{hasPlanTab ? <TabsTrigger value="plans">Plan</TabsTrigger> : null}
{hasArtifactsTab ? <TabsTrigger value="artifacts">Artifacts</TabsTrigger> : null}
<TabsTrigger value="properties" className={paneTabTriggerClass}>
Properties
</TabsTrigger>
{hasPlanTab ? (
<TabsTrigger value="plans" className={paneTabTriggerClass}>
Plan
</TabsTrigger>
) : null}
{hasArtifactsTab ? (
<TabsTrigger value="artifacts" className={paneTabTriggerClass}>
Artifacts
</TabsTrigger>
) : null}
</TabsList>
);
return (