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) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-17 10:25:01 -07:00
parent 0d339f4803
commit 26807c8bf4
3 changed files with 38 additions and 26 deletions

View File

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

View File

@@ -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*\{([^}]*)\}/);

View File

@@ -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 {