diff --git a/.changeset/welcome-menu-fits-width.md b/.changeset/welcome-menu-fits-width.md new file mode 100644 index 000000000..0afe6eb2d --- /dev/null +++ b/.changeset/welcome-menu-fits-width.md @@ -0,0 +1,5 @@ +--- +"@nanocollective/nanocoder": patch +--- + +Fixed the welcome screen's menu wrapping apart on narrow terminals, with each command landing on its own line. The menu now steps down to the short version, or is left out, when its rows would not fit the terminal width, the same way it already does for height. Closes #1434. diff --git a/source/components/welcome-message.spec.tsx b/source/components/welcome-message.spec.tsx index e7cb9f99b..3731884eb 100644 --- a/source/components/welcome-message.spec.tsx +++ b/source/components/welcome-message.spec.tsx @@ -184,6 +184,34 @@ test('WelcomeMessage shows menu for normal terminal', t => { process.stdout.columns = originalColumns; }); +// Each menu row is one line, label then key. Where the full menu no longer +// fits across, the short one takes over, and below that the menu is left out, +// rather than any row wrapping its key onto a line of its own. +test('WelcomeMessage steps the menu down to fit narrow terminals', t => { + const originalColumns = process.stdout.columns; + const menuAt = (columns: number) => { + process.stdout.columns = columns; + return stripAnsi( + renderWithTheme().lastFrame()!, + ); + }; + + try { + const full = menuAt(25); + t.regex(full, /Resume session +\/resume/); + + const short = menuAt(20); + t.notRegex(short, /Resume session/); + t.regex(short, /Help +\/help/); + t.regex(short, /Quit +\/exit/); + + const none = menuAt(12); + t.notRegex(none, /\/help|\/exit/); + } finally { + process.stdout.columns = originalColumns; + } +}); + test('WelcomeMessage shows location and shortcuts for normal terminal', t => { const originalColumns = process.stdout.columns; process.stdout.columns = 80; diff --git a/source/components/welcome-message.tsx b/source/components/welcome-message.tsx index 256667d75..163bd62eb 100644 --- a/source/components/welcome-message.tsx +++ b/source/components/welcome-message.tsx @@ -150,10 +150,15 @@ export default memo(function WelcomeMessage({ } } + // Each menu row is a single line this wide: label, gap, key. A menu is only + // offered when that line fits the width too, or its rows wrap apart. + const menuWidth = (items: Array<[string, string]>) => + Math.max(...items.map(([l, k]) => l.length + k.length)) + 4; + let menu: Array<[string, string]> = []; - if (budget >= MENU_FULL_ROWS) { + if (budget >= MENU_FULL_ROWS && menuWidth(MENU_FULL) <= actualWidth) { menu = MENU_FULL; - } else if (budget >= MENU_MIN_ROWS) { + } else if (budget >= MENU_MIN_ROWS && menuWidth(MENU_MIN) <= actualWidth) { menu = MENU_MIN; } @@ -163,10 +168,7 @@ export default memo(function WelcomeMessage({ return marker ? `${branch} (${marker})` : branch; })(); - const colW = - menu.length > 0 - ? Math.max(...menu.map(([l, k]) => l.length + k.length)) + 4 - : 0; + const colW = menu.length > 0 ? menuWidth(menu) : 0; // Full terminal width for every row so the wordmark and the text below it // share one center axis — a capped box would sit left of the centered