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

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

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
+At tablet widths the Quick Add row previously inherited the centered desktop layout. This declaration
-right. This declaration guard requires a centered base row while retaining the <=768px edge-to-edge
+guard requires the base desktop cluster and 769px–1024px and <=768px edge-to-edge overrides.
-mobile override.
 
 ## 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/);

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
+owned by their existing rules. At <=1024px, the deliberate edge-to-edge `space-between` layout is
-edge-to-edge `space-between`; do not unify these breakpoint layouts.
+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%;