From 76ec9334af0ed115ee3ceaa11ed0a5231a2f9a4c Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 16 Jul 2026 18:23:56 -0700 Subject: [PATCH] FN-8164: enlarge mobile Quick Entry action icons Make icon-forward Quick Entry mobile controls proportionate while preserving touch targets. - Increase only primary mobile action glyphs using spacing tokens - Compact mobile action group gaps without changing desktop sizing - Cover the mobile-only sizing contract and add a patch changeset Files changed: .changeset/fn-8164-quick-add-mobile-icon-sizing.md | 7 +++ .../quick-entry-action-row-height-parity.test.tsx | 59 ++++++++++++++++++++-- .../dashboard/app/components/QuickEntryBox.css | 18 +++++++ 3 files changed, 81 insertions(+), 3 deletions(-) Fusion-Task-Id: FN-8164 Fusion-Task-Lineage: 030688cd-880d-448c-a2ef-d6e967dab169 Co-authored-by: Fusion (runfusion.ai) --- .../fn-8164-quick-add-mobile-icon-sizing.md | 7 +++ ...ck-entry-action-row-height-parity.test.tsx | 59 ++++++++++++++++++- .../app/components/QuickEntryBox.css | 18 ++++++ 3 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 .changeset/fn-8164-quick-add-mobile-icon-sizing.md diff --git a/.changeset/fn-8164-quick-add-mobile-icon-sizing.md b/.changeset/fn-8164-quick-add-mobile-icon-sizing.md new file mode 100644 index 0000000000..3795e11686 --- /dev/null +++ b/.changeset/fn-8164-quick-add-mobile-icon-sizing.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Quick Add action buttons read at a proper size on mobile. +category: fix +dev: Adds a mobile-only (@media max-width:768px) tokenized glyph-size override and tightened horizontal spacing to .quick-entry-actions in QuickEntryBox.css; preserves the 36px touch-target floor and leaves desktop rendering unchanged. Follow-up to FN-8147. 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 174f5ea270..9dba1c6e1e 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 @@ -189,9 +189,13 @@ describe("quick-entry action row height parity (FN-7680)", () => { // Isolate the known FN-1140/FN-6153/FN-6160 mobile touch-target section by // its marker comment so this assertion cannot accidentally cross into an // unrelated @media block or the desktop base rule further up the file. - const sectionStart = cssContent.indexOf("Quick Entry Mobile Touch + Overflow Fixes"); - expect(sectionStart).toBeGreaterThan(-1); - const section = cssContent.slice(sectionStart, sectionStart + 1600); + const markerStart = cssContent.indexOf("Quick Entry Mobile Touch + Overflow Fixes"); + expect(markerStart).toBeGreaterThan(-1); + const sectionStart = cssContent.indexOf("@media (max-width: 768px)", markerStart); + const sectionEnd = cssContent.indexOf("\n@media", sectionStart + 1); + expect(sectionStart).toBeGreaterThan(markerStart); + expect(sectionEnd).toBeGreaterThan(sectionStart); + const section = cssContent.slice(sectionStart, sectionEnd); expect(section).toContain("max-width: 768px"); const mobileBlockMatch = section.match( @@ -201,6 +205,55 @@ describe("quick-entry action row height parity (FN-7680)", () => { expect(mobileBlockMatch![1].trim()).toBe("var(--quick-entry-action-row-height-mobile)"); }); + it("enlarges only mobile icon-forward glyphs with tokenized sizing and tightens horizontal gaps", () => { + const cssContent = loadAllAppCss(); + const markerStart = cssContent.indexOf("Quick Entry Mobile Touch + Overflow Fixes"); + expect(markerStart).toBeGreaterThan(-1); + const sectionStart = cssContent.indexOf("@media (max-width: 768px)", markerStart); + const sectionEnd = cssContent.indexOf("\n@media", sectionStart + 1); + expect(sectionStart).toBeGreaterThan(markerStart); + expect(sectionEnd).toBeGreaterThan(sectionStart); + const mobileSection = cssContent.slice(sectionStart, sectionEnd); + + // FNXC:QuickAddActionRow 2026-07-16-15:00: JSDOM cannot resolve CSS vars or + // render mocked lucide glyphs, so source-contract assertions prove the + // mobile-only cascade keeps the 36px target while making its small 12/14px + // icon-forward glyphs read proportionately and compactly. + const iconRule = mobileSection.match( + /\.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*var\(--space-lg\);/); + expect(iconRule![1]).toMatch(/height:\s*var\(--space-lg\);/); + expect(iconRule![1]).not.toMatch(/\d+(?:\.\d+)?px/); + + const tokenValue = loadStylesCss().match(/--space-lg:\s*(\d+)px;/); + expect(tokenValue).not.toBeNull(); + expect(Number(tokenValue![1])).toBeGreaterThan(14); + + const actionGapRule = mobileSection.match(/\.quick-entry-actions\s*\{([^}]*)\}/); + const optionGapRule = mobileSection.match(/\.quick-entry-options-group\s*\{([^}]*)\}/); + expect(actionGapRule?.[1]).toMatch(/column-gap:\s*var\(--space-xs\);/); + expect(optionGapRule?.[1]).toMatch(/column-gap:\s*var\(--space-xs\);/); + expect(actionGapRule?.[1]).not.toMatch(/\d+(?:\.\d+)?px/); + expect(optionGapRule?.[1]).not.toMatch(/\d+(?:\.\d+)?px/); + + const baseOnlyCss = loadAllAppCssBaseOnly(); + const desktopRule = baseOnlyCss.match( + /\.quick-entry-actions \.btn,\s*\n\s*\.quick-entry-actions \.wf-optional-steps-dropdown-trigger\s*\{([^}]*)\}/, + ); + expect(desktopRule).not.toBeNull(); + expect(desktopRule![1]).toMatch(/min-height:\s*var\(--quick-entry-action-row-height-desktop\);/); + expect(desktopRule![1]).toMatch(/max-height:\s*var\(--quick-entry-action-row-height-desktop\);/); + expect(desktopRule![1]).not.toMatch(/(?:width|height):\s*var\(--space-lg\)/); + + const mobileHeightRule = mobileSection.match( + /\.quick-entry-actions \.btn,\s*\n\s*\.quick-entry-actions \.wf-optional-steps-dropdown-trigger\s*\{([^}]*)\}/, + ); + expect(mobileHeightRule?.[1]).toMatch(/min-height:\s*var\(--quick-entry-action-row-height-mobile\);/); + expect(mobileHeightRule?.[1]).toMatch(/max-height:\s*var\(--quick-entry-action-row-height-mobile\);/); + }); + it("pins desktop and mobile action-row heights outside the shadcn spacing scale", () => { const baseOnlyCss = loadAllAppCssBaseOnly(); const stylesCss = loadStylesCss(); diff --git a/packages/dashboard/app/components/QuickEntryBox.css b/packages/dashboard/app/components/QuickEntryBox.css index 99393b9f7f..1ee6a970f0 100644 --- a/packages/dashboard/app/components/QuickEntryBox.css +++ b/packages/dashboard/app/components/QuickEntryBox.css @@ -829,12 +829,23 @@ FN-7682 — the tokenized-CSS test forbids raw px in the workflow-selector rules full row (`width: 100%`, `margin-left: 0`) so all three rows land on identical edges. The group `gap`s remain as minimum spacing between controls. */ + /* + FNXC:QuickAddActionRow 2026-07-16-15:00: + FN-8164 makes the icon-forward mobile controls read proportionately inside the + FN-7683 36px touch-target box. Scope the --space-lg glyph override to the + primary icon controls so Save, Deps, Models, Node, and Agent retain their + label-friendly inline glyph proportions; their desktop rendering and the + mobile touch-target floor remain intentionally unchanged. Tighten only + horizontal gaps with existing spacing tokens so wrapped rows stay compact. + */ .quick-entry-actions { justify-content: space-between; + column-gap: var(--space-xs); } .quick-entry-options-group { justify-content: space-between; + column-gap: var(--space-xs); } .quick-entry-primary-group { @@ -848,6 +859,13 @@ FN-7682 — the tokenized-CSS test forbids raw px in the workflow-selector rules min-width: var(--space-2xl); } + .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 { max-width: calc(100vw - calc(var(--space-lg) * 2)); }