From 085160816871a030ad3e4916006c19ec2b6f8fd1 Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Fri, 31 Jul 2026 14:44:28 -0700
Subject: [PATCH] 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>
---
 ui/src/components/PropertiesPanel.tsx         |  8 +++---
 .../issue-properties/IssueProperties.tsx      | 27 ++++++++++++++++---
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/PropertiesPanel.tsx b/ui/src/components/PropertiesPanel.tsx
index 65d169d401f..6cad68da0ef 100644
--- a/ui/src/components/PropertiesPanel.tsx
+++ b/ui/src/components/PropertiesPanel.tsx
@@ -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"
diff --git a/ui/src/components/issue-properties/IssueProperties.tsx b/ui/src/components/issue-properties/IssueProperties.tsx
index 6578d8cf6eb..bc170f6d7db 100644
--- a/ui/src/components/issue-properties/IssueProperties.tsx
+++ b/ui/src/components/issue-properties/IssueProperties.tsx
@@ -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 (