From 26807c8bf4a323911702a8b4cf1c76f07fe331f2 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Fri, 17 Jul 2026 10:25:01 -0700 Subject: [PATCH] FN-8211: restore intrinsic mobile option icons Restore intrinsic mobile sizing for Quick Add option icons. - Limit enlarged mobile glyphs to primary Quick Add controls. - Preserve compact options, touch targets, and desktop styling. - Add regression coverage and a patch changeset. Files changed: .changeset/fn-8211-quick-add-icon-revert.md | 7 +++++ .../quick-entry-action-row-height-parity.test.tsx | 27 ++++++++++--------- .../dashboard/app/components/QuickEntryBox.css | 30 +++++++++++++--------- 3 files changed, 38 insertions(+), 26 deletions(-) Fusion-Task-Id: FN-8211 Fusion-Task-Lineage: 85399053-2d6e-4bb7-8741-e7c3b1aa437d Co-authored-by: Fusion (runfusion.ai) --- .changeset/fn-8211-quick-add-icon-revert.md | 7 +++++ ...ck-entry-action-row-height-parity.test.tsx | 27 ++++++++--------- .../app/components/QuickEntryBox.css | 30 +++++++++++-------- 3 files changed, 38 insertions(+), 26 deletions(-) create mode 100644 .changeset/fn-8211-quick-add-icon-revert.md diff --git a/.changeset/fn-8211-quick-add-icon-revert.md b/.changeset/fn-8211-quick-add-icon-revert.md new file mode 100644 index 0000000000..f7b7df3126 --- /dev/null +++ b/.changeset/fn-8211-quick-add-icon-revert.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Quick Add Deps/Models/Agent icons no longer render oversized on mobile. +category: fix +dev: Reverts FN-8186 — scopes the mobile (@media max-width:768px) glyph-size override in QuickEntryBox.css back to the primary-group icon controls so options-group glyphs (Deps/Models/Agent/Node/Workflow) fall back to their intrinsic size; desktop and the 36px touch-target floor unchanged. diff --git a/packages/dashboard/app/__tests__/quick-entry-action-row-height-parity.test.tsx b/packages/dashboard/app/__tests__/quick-entry-action-row-height-parity.test.tsx index af5c782e8d..b7d2ad5d01 100644 --- a/packages/dashboard/app/__tests__/quick-entry-action-row-height-parity.test.tsx +++ b/packages/dashboard/app/__tests__/quick-entry-action-row-height-parity.test.tsx @@ -205,7 +205,7 @@ describe("quick-entry action row height parity (FN-7680)", () => { expect(mobileBlockMatch![1].trim()).toBe("var(--quick-entry-action-row-height-mobile)"); }); - it("enlarges every mobile action-row glyph with tokenized sizing and tightens horizontal spacing", () => { + it("keeps options-group glyphs intrinsic while sizing only mobile primary controls", () => { const cssContent = loadAllAppCss(); const markerStart = cssContent.indexOf("Quick Entry Mobile Touch + Overflow Fixes"); expect(markerStart).toBeGreaterThan(-1); @@ -215,25 +215,24 @@ describe("quick-entry action row height parity (FN-7680)", () => { expect(sectionEnd).toBeGreaterThan(sectionStart); const mobileSection = cssContent.slice(sectionStart, sectionEnd); - // FNXC:QuickAddActionRow 2026-07-16-16:00: JSDOM cannot resolve CSS vars or - // render mocked lucide glyphs, so source-contract assertions prove the - // mobile-only cascade covers both option and primary groups. The broad - // primary-group selector includes the session-advisor glyph rather than - // leaving it at its inline 14px size. + // FNXC:QuickAddActionRow 2026-07-17-00:00: FN-8211 locks the operator + // requirement that mobile Deps, Models, and Agent glyphs retain their + // intrinsic sizes. JSDOM cannot resolve CSS vars or render mocked lucide + // glyphs, so this source contract proves the enlargement remains limited + // to the primary controls and cannot regress into the options group. const iconRule = mobileSection.match( - /\.quick-entry-options-group svg,\s*\n\s*\.quick-entry-primary-group svg\s*\{([^}]*)\}/, + /\.quick-entry-primary-group \.btn-icon svg,\s*\n\s*\.quick-entry-primary-group \[data-testid="quick-entry-priority-button"\] svg,\s*\n\s*\.quick-entry-primary-group \[data-testid="quick-entry-fast-toggle"\] svg\s*\{([^}]*)\}/, ); expect(iconRule).not.toBeNull(); - expect(iconRule![1]).toMatch(/width:\s*calc\(var\(--space-md\) \+ var\(--space-sm\)\);/); - expect(iconRule![1]).toMatch(/height:\s*calc\(var\(--space-md\) \+ var\(--space-sm\)\);/); + expect(iconRule![1]).toMatch(/width:\s*var\(--space-lg\);/); + expect(iconRule![1]).toMatch(/height:\s*var\(--space-lg\);/); expect(iconRule![1]).not.toMatch(/\d+(?:\.\d+)?px/); + expect(mobileSection).not.toMatch(/\.quick-entry-options-group svg/); const stylesCss = loadStylesCss(); - const mediumToken = stylesCss.match(/--space-md:\s*(\d+)px;/); - const smallToken = stylesCss.match(/--space-sm:\s*(\d+)px;/); - expect(mediumToken).not.toBeNull(); - expect(smallToken).not.toBeNull(); - expect(Number(mediumToken![1]) + Number(smallToken![1])).toBeGreaterThan(16); + const largeToken = stylesCss.match(/--space-lg:\s*(\d+)px;/); + expect(largeToken).not.toBeNull(); + expect(Number(largeToken![1])).toBeGreaterThan(14); const actionGapRule = mobileSection.match(/\.quick-entry-actions\s*\{([^}]*)\}/); const optionGapRule = mobileSection.match(/\.quick-entry-options-group\s*\{([^}]*)\}/); diff --git a/packages/dashboard/app/components/QuickEntryBox.css b/packages/dashboard/app/components/QuickEntryBox.css index ca09d9f303..a7171ced28 100644 --- a/packages/dashboard/app/components/QuickEntryBox.css +++ b/packages/dashboard/app/components/QuickEntryBox.css @@ -831,14 +831,19 @@ FN-7682 — the tokenized-CSS test forbids raw px in the workflow-selector rules */ /* FNXC:QuickAddActionRow 2026-07-16-16:00: - FN-8186 refines FN-8164 after mobile feedback: every rendered action-row - glyph uses the tokenized 20px composite size, rather than enlarging only - primary icon controls by 2px. Scoping to the two row groups covers option, - text, and icon controls (including the session-advisor toggle) without - changing desktop. Their horizontal padding is tightened locally so the larger - glyphs remain compact and Save keeps its never-clipped content width. The - FN-7683 fixed 36px touch-target height and 32px icon-button width floor stay - intact for accessibility. + FN-8186 broadened the mobile glyph-size override to both action-row groups. + It retained compact horizontal padding, Save's never-clipped content width, + and the FN-7683 fixed 36px touch-target height and 32px icon-button width + floor. + + FNXC:QuickAddActionRow 2026-07-17-00:00: + FN-8211 reverts FN-8186's broad options-group and primary-group glyph + enlargement: operators reported the Deps, Models, and Agent options-group + icons read too large at 20px on mobile. Scope the mobile glyph-size override + back to the FN-8164 primary icon controls (Save, Attach, GitHub, Priority, + and Fast) at --space-lg so options-group controls fall back to their + intrinsic size={12}/size={14}. Desktop and the FN-7683 36px touch-target + floor are unchanged. */ .quick-entry-actions { justify-content: space-between; @@ -867,10 +872,11 @@ FN-7682 — the tokenized-CSS test forbids raw px in the workflow-selector rules min-width: var(--space-2xl); } - .quick-entry-options-group svg, - .quick-entry-primary-group svg { - width: calc(var(--space-md) + var(--space-sm)); - height: calc(var(--space-md) + var(--space-sm)); + .quick-entry-primary-group .btn-icon svg, + .quick-entry-primary-group [data-testid="quick-entry-priority-button"] svg, + .quick-entry-primary-group [data-testid="quick-entry-fast-toggle"] svg { + width: var(--space-lg); + height: var(--space-lg); } .quick-entry-box .dep-dropdown {