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:
7
.changeset/fn-8211-quick-add-icon-revert.md
Normal file
7
.changeset/fn-8211-quick-add-icon-revert.md
Normal 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.
|
||||
@@ -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*\{([^}]*)\}/);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user