FN-7330: normalize Activity segment sizing

Normalize the task-detail Activity segmented control so active tabs do not change row height.

- Set base Activity segment sizing, label size, line-height, and border-box behavior for consistent Live/Feed/Raw Logs heights.
- Add regression coverage for equal-height, horizontally scrollable Activity segment tabs across modal and embedded surfaces.
- Add a patch changeset for the dashboard Activity tab sizing fix.

Files changed:
 .changeset/silver-activity-segments.md             |  7 +++++
 .../dashboard/app/components/TaskDetailModal.css   |  8 +++++-
 ...etailModal.responsive-and-dependencies.test.tsx | 30 ++++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-7330

Fusion-Task-Lineage: b833c5f0-b46b-4a05-84a5-e199c1547a6a

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-06-30 21:02:23 -07:00
parent b52f92cb7c
commit a48ff305db
3 changed files with 44 additions and 1 deletions

View File

@@ -0,0 +1,7 @@
---
"@runfusion/fusion": patch
---
summary: Keep task-detail Activity segment tabs equal-height with smaller labels.
category: fix
dev: Normalizes Live/Feed/Raw Logs segmented-control sizing in the dashboard task detail panel.

View File

@@ -2431,6 +2431,9 @@ FNXC:TaskDetailTabs 2026-06-26-00:35:
/*
FNXC:TaskDetailActivity 2026-06-30-23:55:
The Activity top-level tab owns Live (internal `current`), Feed, and Raw Logs as an in-content segmented control. Keep this selector visually quieter than the top-level tab strip and horizontally reachable on narrow modal and embedded task-detail surfaces; the Activity-wide expand control must sit beside it on every segment.
FNXC:TaskDetailActivity 2026-06-30-12:00:
Selected Activity segments must stay the same height as inactive siblings while using a slightly smaller label. Keep sizing on the base segment contract so visual active-state styling cannot alter the Live/Feed/Raw Logs row height.
*/
.activity-toolbar {
display: flex;
@@ -2457,15 +2460,18 @@ The Activity top-level tab owns Live (internal `current`), Feed, and Raw Logs as
}
.activity-segment {
box-sizing: border-box;
flex: 0 0 auto;
min-block-size: var(--space-2xl);
padding: calc(var(--space-xs) / 2) var(--space-md);
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
font-size: var(--font-size-sm);
font-size: var(--font-size-xs);
font-weight: 500;
line-height: var(--line-height-tight);
font-family: inherit;
touch-action: pan-x pan-y;
transition: color var(--transition-fast), background var(--transition-fast);

View File

@@ -264,6 +264,36 @@ describe("TaskDetailModal", () => {
expect(detailBodyBlock).not.toContain("overflow: hidden;");
});
it("keeps Activity segment tabs equal-height and horizontally reachable", () => {
const css = readDashboardStylesSource();
const controlBlock = getExactCssRuleBlock(css, ".activity-segmented-control");
const segmentBlock = getExactCssRuleBlock(css, ".activity-segment");
const activeSegmentBlock = getExactCssRuleBlock(css, ".activity-segment-active");
const mobileBlock = getCssAtRuleBlockContainingExactRule(css, "@media (max-width: 768px)", ".activity-segmented-control");
const mobileControlBlock = getExactCssRuleBlock(mobileBlock, ".activity-segmented-control");
expectHorizontalTabScroller(controlBlock, "base .activity-segmented-control");
expectTabTouchAction(segmentBlock, "base .activity-segment");
expect(segmentBlock).toContain("box-sizing: border-box;");
expect(segmentBlock).toContain("flex: 0 0 auto;");
expect(segmentBlock).toContain("min-block-size: var(--space-2xl);");
expect(segmentBlock).toContain("font-size: var(--font-size-xs);");
expect(segmentBlock).toContain("line-height: var(--line-height-tight);");
expect(segmentBlock).toContain("padding: calc(var(--space-xs) / 2) var(--space-md);");
expect(segmentBlock).toContain("border: none;");
expect(activeSegmentBlock).toContain("color: var(--text);");
expect(activeSegmentBlock).toContain("background: var(--surface);");
expect(activeSegmentBlock).toContain("box-shadow: var(--shadow-sm);");
expect(activeSegmentBlock).not.toContain("padding:");
expect(activeSegmentBlock).not.toContain("min-block-size:");
expect(activeSegmentBlock).not.toContain("line-height:");
expect(activeSegmentBlock).not.toContain("font-size:");
expect(activeSegmentBlock).not.toContain("font-weight:");
expect(activeSegmentBlock).not.toContain("border:");
expect(mobileControlBlock).toContain("flex: 1 1 auto;");
expect(css).not.toMatch(/\.task-detail-content--embedded\s+\.activity-segment(?:ed-control)?\s*\{/);
});
it("renders responsive structural classes (modal-lg, overlay, spacer, tabs, detail-body)", () => {
const { container } = render(
<TaskDetailModal