From 401b057965e02fa422472f71c8c7c1275a85015a Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 13 Aug 2026 00:50:50 -0700 Subject: [PATCH] FN-9025: align Quick Add tablet actions edge-to-edge Make Quick Add action controls use the mobile edge-to-edge layout at tablet widths. - Add a tablet-specific responsive action-row layout. - Preserve centered desktop controls and existing mobile behavior. - Cover tablet spacing declarations and add a patch changeset. Files changed: .changeset/fn-9025-quick-add-tablet-spacing.md | 7 ++++ .../quick-entry-action-row-centering.css.test.ts | 35 +++++++++++++++--- .../dashboard/app/components/QuickEntryBox.css | 41 ++++++++++++++++++++-- 3 files changed, 75 insertions(+), 8 deletions(-) Fusion-Task-Id: FN-9025 Fusion-Task-Lineage: 8850dd57-c99e-4f18-98d5-576c0bc7e665 Co-authored-by: Fusion (runfusion.ai) --- .../fn-9025-quick-add-tablet-spacing.md | 7 ++++ ...ick-entry-action-row-centering.css.test.ts | 35 +++++++++++++--- .../app/components/QuickEntryBox.css | 41 +++++++++++++++++-- 3 files changed, 75 insertions(+), 8 deletions(-) create mode 100644 .changeset/fn-9025-quick-add-tablet-spacing.md diff --git a/.changeset/fn-9025-quick-add-tablet-spacing.md b/.changeset/fn-9025-quick-add-tablet-spacing.md new file mode 100644 index 0000000000..1190701c9f --- /dev/null +++ b/.changeset/fn-9025-quick-add-tablet-spacing.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Quick Add buttons now use mobile edge-to-edge spacing on tablet-width screens. +category: fix +dev: Adds a 769px–1024px positioning tier in QuickEntryBox.css. diff --git a/packages/dashboard/app/__tests__/quick-entry-action-row-centering.css.test.ts b/packages/dashboard/app/__tests__/quick-entry-action-row-centering.css.test.ts index 375a88d818..a26008b57a 100644 --- a/packages/dashboard/app/__tests__/quick-entry-action-row-centering.css.test.ts +++ b/packages/dashboard/app/__tests__/quick-entry-action-row-centering.css.test.ts @@ -1,10 +1,9 @@ /* @vitest-environment jsdom */ /* -FNXC:QuickAddActionRow 2026-08-13-05:24: +FNXC:QuickAddActionRow 2026-08-13-07:38: ## Symptom Verification -At desktop/tablet widths the Quick Add row previously split its options left and primary actions -right. This declaration guard requires a centered base row while retaining the <=768px edge-to-edge -mobile override. +At tablet widths the Quick Add row previously inherited the centered desktop layout. This declaration +guard requires the base desktop cluster and 769px–1024px and <=768px edge-to-edge overrides. ## Surface Enumeration QuickEntryBox shares this stylesheet across Board, List, modal, Chat, and floating hosts. This test @@ -96,8 +95,23 @@ function mobileSection(): string { return css.slice(start, end); } +function tabletSection(): string { + const start = css.indexOf("@media (min-width: 769px) and (max-width: 1024px)"); + expect(start, "tablet tier must exist").toBeGreaterThan(-1); + const bodyStart = css.indexOf("{", start) + 1; + let depth = 1; + let cursor = bodyStart; + while (cursor < css.length && depth > 0) { + if (css[cursor] === "{") depth += 1; + if (css[cursor] === "}") depth -= 1; + cursor += 1; + } + expect(depth, "tablet tier must close").toBe(0); + return css.slice(bodyStart, cursor - 1); +} + describe("QuickEntryBox action-row centering", () => { - it("centers the desktop/tablet cluster without restoring its pre-fix split sizing", () => { + it("centers the desktop cluster without restoring its pre-fix split sizing", () => { const actions = ruleBody(".quick-entry-actions"); expect(actions.body).toMatch(/justify-content:\s*center/); expect(isInsideMediaQuery(actions.index)).toBe(false); @@ -114,6 +128,17 @@ describe("QuickEntryBox action-row centering", () => { expect(actions.body).not.toMatch(/(?:#[0-9a-f]{3,8}|rgba?\(|\d+(?:\.\d+)?px)/i); }); + it("uses the edge-to-edge mobile positioning contract at tablet widths", () => { + const tablet = tabletSection(); + const forbiddenRawValues = /(?:#[0-9a-f]{3,8}|rgba?\(|\d+(?:\.\d+)?px)/i; + expect(tablet).toMatch(/\.quick-entry-actions\s*\{[^}]*justify-content:\s*space-between[^}]*column-gap:\s*var\(--space-xs\)/); + expect(tablet).toMatch(/\.quick-entry-options-group\s*\{[^}]*justify-content:\s*space-between[^}]*column-gap:\s*var\(--space-xs\)/); + expect(tablet).toMatch(/\.quick-entry-primary-group\s*\{[^}]*gap:\s*var\(--space-xs\)[^}]*justify-content:\s*space-between[^}]*width:\s*100%[^}]*margin-left:\s*0/); + expect(tablet).toMatch(/\.quick-entry-primary-group \.btn-icon\s*\{[^}]*min-width:\s*var\(--space-2xl\)/); + expect(tablet).not.toMatch(/--quick-entry-action-row-height-mobile|touch-action|--space-lg/); + expect(tablet).not.toMatch(forbiddenRawValues); + }); + it("preserves the intentional <=768px edge-to-edge mobile layout", () => { const mobile = mobileSection(); expect(mobile).toMatch(/\.quick-entry-actions\s*\{[^}]*justify-content:\s*space-between/); diff --git a/packages/dashboard/app/components/QuickEntryBox.css b/packages/dashboard/app/components/QuickEntryBox.css index c5c7060591..0cdded85c6 100644 --- a/packages/dashboard/app/components/QuickEntryBox.css +++ b/packages/dashboard/app/components/QuickEntryBox.css @@ -188,12 +188,12 @@ section under one line. /* FNXC:QuickAddActionRow 2026-08-13-05:24: -The operator asked for the Quick Add bottom row to read as one centered desktop/tablet cluster. +The operator asked for the Quick Add bottom row to read as one centered desktop cluster (>=1025px). Replace the split toolbar's greedy options group and auto-pushed primary group with base-scope centering while preserving DOM order, grouping, and the action row's existing flex width. The FN-7680/FN-7683/FN-8147 fixed-height and FN-7684/FN-8164 Save-never-clipped contracts remain -owned by their existing rules. At <=768px, the deliberate 2026-07-16-13:05 operator decision keeps -edge-to-edge `space-between`; do not unify these breakpoint layouts. +owned by their existing rules. At <=1024px, the deliberate edge-to-edge `space-between` layout is +owned by the mobile and tablet tiers; do not unify these breakpoint layouts. */ .quick-entry-actions { display: flex; @@ -913,6 +913,41 @@ FN-7682 — the tokenized-CSS test forbids raw px in the workflow-selector rules } } +/* +FNXC:QuickAddActionRow 2026-08-13-07:38: +The operator requires tablet Quick Add controls to position like mobile: edge-to-edge rows with +shared left/right edges and compact gaps. Keep the centered cluster desktop-only, and keep mobile +36px touch targets and enlarged glyphs out of this tablet tier. +*/ +@media (min-width: 769px) and (max-width: 1024px) { + .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 { + gap: var(--space-xs); + justify-content: space-between; + width: 100%; + margin-left: 0; + } + + .quick-entry-options-group .btn, + .quick-entry-options-group .wf-optional-steps-dropdown-trigger, + .quick-entry-primary-group .btn-icon { + padding-inline: var(--space-sm); + } + + .quick-entry-primary-group .btn-icon { + min-width: var(--space-2xl); + } +} + @media (max-width: 768px) { .agent-list-modal { width: 100%;