diff --git a/.changeset/fn-7823-terminal-header-nowrap.md b/.changeset/fn-7823-terminal-header-nowrap.md new file mode 100644 index 0000000000..aa22625ab2 --- /dev/null +++ b/.changeset/fn-7823-terminal-header-nowrap.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Fix terminal header wrapping and spacing when the panel is narrow. +category: fix +dev: Header shortcut/status text now stays nowrap so terminal actions scroll horizontally instead of wrapping. diff --git a/packages/dashboard/app/components/TerminalModal.css b/packages/dashboard/app/components/TerminalModal.css index 4eaf603804..acea0a0740 100644 --- a/packages/dashboard/app/components/TerminalModal.css +++ b/packages/dashboard/app/components/TerminalModal.css @@ -851,6 +851,14 @@ The terminal header pop-out/dock affordance is an icon-only utility control. It color: var(--text-muted); } +/* +FNXC:TerminalHeader 2026-07-11-18:45: +FN-7823: viewport-based terminal breakpoints keep narrow floating/docked panels on the desktop header layout, so the header help text must stay on one line and let .terminal-actions use the FN-7550 min-width: 0 + overflow-x scroll pattern instead of wrapping the header. +*/ +.terminal-shortcuts--header { + white-space: nowrap; +} + .terminal-shortcuts kbd { display: inline-block; padding: 2px 6px; @@ -1254,6 +1262,7 @@ The shortcut bar (modifier keys + arrow keys) must sit on ONE line, not stack in .terminal-connection-status { font-weight: 500; + white-space: nowrap; } .terminal-connection-status.connected { diff --git a/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx b/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx index 015534de88..6ab50ac611 100644 --- a/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx +++ b/packages/dashboard/app/components/__tests__/TerminalModal.test.tsx @@ -1556,6 +1556,27 @@ describe("TerminalModal", () => { expect(tabletBlock).not.toMatch(/\.terminal-connection-status/); }); + it("keeps the desktop terminal header controls on one scrollable row when narrow (FN-7823)", () => { + // FN-7823: large viewport breakpoints can still produce narrow floating or + // docked panels, so the desktop header must preserve horizontal scrolling + // instead of wrapping the help/status text into multiple rows. + const shortcutsHeaderRule = terminalModalCss.match(/\.terminal-shortcuts--header\s*\{([^}]*)\}/)?.[1] ?? ""; + expect(shortcutsHeaderRule).toContain("white-space: nowrap;"); + + const actionsRule = terminalModalCss.match(/\.terminal-actions\s*\{([^}]*)\}/)?.[1] ?? ""; + expect(actionsRule).toContain("min-width: 0;"); + expect(actionsRule).toContain("overflow-x: auto;"); + expect(actionsRule).not.toContain("flex-wrap: wrap;"); + + const connectionStatusRule = terminalModalCss.match(/\.terminal-connection-status\s*\{([^}]*)\}/)?.[1] ?? ""; + expect(connectionStatusRule).toContain("white-space: nowrap;"); + + const mobileHideBlock = terminalModalCss.match( + /@media \(max-width: 768px\) \{[\s\S]*?\.terminal-shortcuts--header,\s*\n\s*\.terminal-connection-status \{([^}]*)\}/, + )?.[1] ?? ""; + expect(mobileHideBlock).toContain("display: none;"); + }); + describe("real-CSS mobile cascade (FN-7621 recurrence #3)", () => { // FN-7621: the FN-7550/FN-7560 tests above are leaf-rule string matches — // they proved the declarations exist, but never proved the panel actually