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: 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. 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 { .activity-toolbar {
display: flex; display: flex;
@@ -2457,15 +2460,18 @@ The Activity top-level tab owns Live (internal `current`), Feed, and Raw Logs as
} }
.activity-segment { .activity-segment {
box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
min-block-size: var(--space-2xl);
padding: calc(var(--space-xs) / 2) var(--space-md); padding: calc(var(--space-xs) / 2) var(--space-md);
background: none; background: none;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
font-weight: 500; font-weight: 500;
line-height: var(--line-height-tight);
font-family: inherit; font-family: inherit;
touch-action: pan-x pan-y; touch-action: pan-x pan-y;
transition: color var(--transition-fast), background var(--transition-fast); transition: color var(--transition-fast), background var(--transition-fast);

View File

@@ -264,6 +264,36 @@ describe("TaskDetailModal", () => {
expect(detailBodyBlock).not.toContain("overflow: hidden;"); 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)", () => { it("renders responsive structural classes (modal-lg, overlay, spacer, tabs, detail-body)", () => {
const { container } = render( const { container } = render(
<TaskDetailModal <TaskDetailModal