mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-25 17:45:53 +01:00
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:
1 parent
af4b0280d2
commit
0851608168
2 files changed
+28
-7
No files matched your search
@@ -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 (
|
||||
|
||||
Reference in new issue
Block a user