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(