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) <noreply@runfusion.ai>

.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.

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();

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));
   }