From a48ff305db5d05435595f963ef42baca6d2a3579 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Tue, 30 Jun 2026 21:02:23 -0700 Subject: [PATCH] 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) --- .changeset/silver-activity-segments.md | 7 +++++ .../app/components/TaskDetailModal.css | 8 ++++- ...Modal.responsive-and-dependencies.test.tsx | 30 +++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 .changeset/silver-activity-segments.md diff --git a/.changeset/silver-activity-segments.md b/.changeset/silver-activity-segments.md new file mode 100644 index 0000000000..a9538481e1 --- /dev/null +++ b/.changeset/silver-activity-segments.md @@ -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. diff --git a/packages/dashboard/app/components/TaskDetailModal.css b/packages/dashboard/app/components/TaskDetailModal.css index b1dd0a90d1..79559fe974 100644 --- a/packages/dashboard/app/components/TaskDetailModal.css +++ b/packages/dashboard/app/components/TaskDetailModal.css @@ -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); diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx index f2aaa8459c..bf0c8e88ff 100644 --- a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx @@ -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(