FN-7550: fix mobile terminal shortcut bar horizontal scrolling

Fixes the terminal quick-shortcut bar so it actually scrolls horizontally on mobile instead of clipping keys off-screen.

- Add min-width: 0 to .terminal-shortcut-panel to defeat the flex min-width:auto trap (panel's automatic min-width equalled the sum of all nowrap buttons, overriding overflow-x: auto and letting the modal's overflow: hidden clip the rightmost shortcuts)
- Add regression test asserting the base rule keeps min-width: 0, overflow-x: auto, and flex-wrap: nowrap, and that the mobile media-query override doesn't reintroduce a conflicting min-width
- Add changeset (patch) documenting the fix for @runfusion/fusion

Files changed:
 .changeset/fn-7550-terminal-shortcut-scroll.md         |  7 +++++++
 packages/dashboard/app/components/TerminalModal.css    |  5 +++++
 .../app/components/__tests__/TerminalModal.test.tsx    | 18 ++++++++++++++++++
 3 files changed, 30 insertions(+)

Fusion-Task-Id: FN-7550

Fusion-Task-Lineage: a9eed0b8-d0ce-49cb-8ff5-a24d1f2d786e

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/fn-7550-terminal-shortcut-scroll.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Fix the mobile terminal shortcut bar so it scrolls horizontally to reach every key.
+category: fix
+dev: Added `min-width: 0` to `.terminal-shortcut-panel` to defeat the flex min-width:auto trap that clipped overflow instead of engaging `overflow-x: auto`.

packages/dashboard/app/components/TerminalModal.css

@@ -1152,6 +1152,11 @@ The shortcut bar (modifier keys + arrow keys) must sit on ONE line, not stack in
   touch-action: pan-x;
   overscroll-behavior-x: contain;
   -webkit-overflow-scrolling: touch;
+  /*
+  FNXC:Terminal 2026-07-04-00:00:
+  FN-7550: on mobile the panel did not actually scroll — as a flex item its automatic min-width defaults to its min-content size (the sum of all nowrap buttons), which overrides the modal-width constraint so overflow-x: auto never engaged; the overflow was instead clipped by the terminal modal's overflow: hidden. min-width: 0 defeats this classic flexbox min-width:auto trap, constraining the panel to the modal/viewport width so overflow-x: auto produces a real horizontal scroll reaching every button. Same pattern already used by .terminal-mobile-tabs, .terminal-workspace-picker-menu, and .terminal-actions in this file.
+  */
+  min-width: 0;
 }
 
 .terminal-shortcut-modifier-row,

packages/dashboard/app/components/__tests__/TerminalModal.test.tsx

@@ -1285,6 +1285,24 @@ describe("TerminalModal", () => {
   });
 
   describe("shortcut panel", () => {
+    it("constrains the panel to the modal width so it scrolls horizontally instead of overflowing (FN-7550)", () => {
+      // FN-7550: the base rule must declare min-width: 0 to defeat the flex
+      // min-width:auto trap — without it the panel's automatic minimum equals
+      // the sum of all nowrap buttons, which overrides overflow-x: auto and
+      // lets the modal's overflow: hidden clip the rightmost shortcuts on mobile.
+      const panelRule = terminalModalCss.match(/\.terminal-shortcut-panel\s*\{([^}]*)\}/)?.[1] ?? "";
+      expect(panelRule).toContain("min-width: 0;");
+      expect(panelRule).toContain("overflow-x: auto;");
+      expect(panelRule).toContain("flex-wrap: nowrap;");
+
+      // The mobile override (max-height clamp) must still exist and must not
+      // reintroduce a conflicting min-width.
+      const mobilePanelRule =
+        terminalModalCss.match(/@media \(max-width: 768px\) \{[\s\S]*?\.terminal-shortcut-panel\s*\{([^}]*)\}/)?.[1] ?? "";
+      expect(mobilePanelRule).toContain("max-height");
+      expect(mobilePanelRule).not.toContain("min-width");
+    });
+
     it("is hidden by default and toggles from header action", async () => {
       render(<TerminalModal isOpen={true} onClose={mockOnClose} />);