From d09b57fc66590561a5d302ce01db12d9be5ab9ac Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sat, 4 Jul 2026 19:38:10 -0700 Subject: [PATCH] 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) --- .changeset/fn-7550-terminal-shortcut-scroll.md | 7 +++++++ .../dashboard/app/components/TerminalModal.css | 5 +++++ .../__tests__/TerminalModal.test.tsx | 18 ++++++++++++++++++ 3 files changed, 30 insertions(+) create mode 100644 .changeset/fn-7550-terminal-shortcut-scroll.md diff --git a/.changeset/fn-7550-terminal-shortcut-scroll.md b/.changeset/fn-7550-terminal-shortcut-scroll.md new file mode 100644 index 0000000000..89119231f1 --- /dev/null +++ b/.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`. diff --git a/packages/dashboard/app/components/TerminalModal.css b/packages/dashboard/app/components/TerminalModal.css index 5782a10e64..454d2df5ff 100644 --- a/packages/dashboard/app/components/TerminalModal.css +++ b/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, diff --git a/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx b/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx index 0cd040e363..d913d1428c 100644 --- a/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx +++ b/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();