[Programcode]

Layout-only cleanup of the Ask composer and the Generate result toolbar. It stacks on #228 (design/debateowl-restyle). Every control, label and translation from before is still there, and nothing new was added.

What moved

Ask: Options joins the mode row

Before, Options (Hungarian: "Beállítások", which is why it reads as Settings) took a row of its own under General/Clarify, so there were three rows of controls above the message box. Now it sits at the right end of the General/Clarify row, and its popover opens from the right edge.

I put it there because Options changes how the next message is answered (citations, web search, pros/cons, argument map, model), the same kind of choice as General/Clarify. Keeping it beside the modes, right above the box it affects, puts every per-message setting on one line. The card header was the other candidate, but Save and Clear there act on the whole conversation, not on the next message.

On phones (below 640px) the button shows only its sliders icon and the active-option count. The word "Options" stays as the button's accessible name (sr-only sm:not-sr-only, the same pattern the Flowchart toolbar uses), so screen readers and the existing getByRole('button', { name: 'Options' }) selectors still find it. The full label is back from 640px up. The icon-only button is needed because in Hungarian "Általános", "Pontosítás" and "Beállítások" don't fit on one 375px row.

Generate: actions in purpose order, even rows on phones

The top row went from Open in Crossfire, Save, Discuss, Flowcharts, Undo to:

1. Actions on this case. Save (or "Saved to History"), then Undo.
2. Places to take it next. Discuss, Flowcharts, then Open in Crossfire.

The export row keeps its order (Export tag, Clipboard, PDF, DOCX, Google Docs).

On phones the rows used to wrap raggedly, with a long button alone on one line and two short ones on the next. Below 640px both rows now fill even two-up pairs, and a label too long for half a row ("Megnyitás a Keresztkérdezésben") takes the full row. The Export tag sits on its own line above its four buttons. Both rows now use the same two-column layout, which gives the top and bottom the balance the brief asked for. From 640px up, buttons keep their natural width and stay left-aligned, as decided for this toolbar on 2026-05-27.

ExportToolbar is shared with Attack, Brainstorm and Factoids. The phone pairing is behind a new opt-in evenRows prop that only Generate passes, so those three tools look exactly as before.

How it was checked

Screenshots and checks come from a Playwright script driving the real app on the local verify stack (local Supabase, real Edge Functions, fake model provider, demo-code sign-in). It covered 10 viewports: phones at 375×812, 390×844 and 430×932; iPad at 768×1024, 1024×768, 1024×1366 and 1366×1024 (touch emulated, pointer: coarse asserted); desktop at 1280×800, 1440×900 and 1920×1080. The script switched theme through System in Settings and checked the dark class on <html>, and switched language with ?lang= and checked <html lang>.

The script checked each state for page overflow, controls overlapping each other or leaving their menu, clipped button text, rows that hide overflow by scrolling, and touch targets under 44px on touch viewports.

• BEFORE (base c9cf5ddf) had no findings in either menu.
• AFTER has no findings at any of the 10 viewports. The first AFTER run caught a real bug. On phones, the saved state squeezed "Megnyitás a Keresztkérdezésben" into half a row and overflowed by 15 to 29px. Buttons set their own touch min-width, which overrides flexbox's content-based minimum. The fix (min-w-fit on even-row items) is in this PR, and the recaptured phones are clean.

Test results are below the screenshots.

Screenshots

Each image is one state at all 10 viewports. BEFORE is from design/debateowl-restyle at c9cf5ddf; AFTER is this branch. Click an image for full size. Files are in docs/screenshots/menu-layout/.

Ask

empty, EN, light

Before

After

Options open, EN, light

Before

After

Options open, HU, light

Before

After

loading (Stop showing, Send disabled), EN

Before

After

filled, EN, light

Before

After

filled, HU, light

Before

After

filled, HU, dark

Before

After

filled, ES, light

Before

After

error with Retry, EN, light

Before

After

error with Retry, EN, dark

Before

After

saved-chats sidebar open, HU, dark (1024 and wider only)

Before

After

Generate

filled, one-off (Save button), EN, light

Before

After

filled, EN, dark

Before

After

filled, HU, light

Before

After

filled, HU, dark

Before

After

filled, ES, light

Before

After

filed in a debate (Saved to History), HU, light

Before

After

regenerating a section (Undo disabled), EN

Before

After

empty form, no toolbar yet (unchanged)

Before

After

loading, no toolbar yet (unchanged)

Before

After

error panel, no toolbar yet (unchanged)

Before

After

Test results

All runs are local, from this worktree at the code commit. GitHub Actions is billing-blocked, so CI shows red without having run.

• npm run verify passed. That covers the docs check, lint, typecheck, 651 unit tests, 30 collaboration tests, 470 edge tests, build, service worker check, and 47 @smoke browser tests.
• Full-stack runs on the local verify stack (fake provider) passed on both desktop-chromium and mobile-chromium: recipes/ai-tools (8 and 8), recipes/case-generation (9 and 9), e2e/full-stack/ai-tools (5 and 5). These drive Ask with Options and Generate end to end.
• npm run test:e2e (desktop and mobile Chromium): 281 passed, 5 skipped, 2 flaky, 6 failed.
  • The 6 failures are the three known pre-existing failures on main, each on both projects: loading-performance.spec.ts:63, navigation-performance.spec.ts:344, search-quality.spec.ts:7. They are not fixed here.
  • The 2 flaky tests passed on retry and don't touch either menu: home-navigation.spec.ts:90 (onboarding delay) and quality-backlog.spec.ts:20 (ES page titles).
  • The Ask and Generate specs (authed-pages, results-overflow, hungarian-parity, localization, animation-polish, first-run), rerun on their own with a list reporter: 114 passed on desktop and mobile Chromium, none skipped.
• Not run: the agentic suite ($H e2e run, which spends OpenRouter credit), WebKit, and staging.

Not sure about

• Icon-only Options on phones. The label is still the accessible name and comes back at 640px, but sighted phone users now see only the sliders icon. The alternative was a second row, which this PR exists to remove. If you'd rather keep the word, the next option is shortening the Hungarian string, which is a copy change.
• Desktop Generate in Hungarian. The results column is about 680px wide next to the form, so "Megnyitás a Keresztkérdezésben" still wraps to a second line at 1024 to 1920. It now sits last, in its purpose group, instead of first. Equal-width rows above 640px would fix the wrap but would undo the 2026-05-27 left-aligned decision, so I left them out.
• Shared case page. /share/:code renders the same GenerateResults, so its export row gets the phone pairing too. It has no top-row actions.
• Not captured. The Google Docs "exporting" spinner, which needs a Google sign-in. Dark theme is captured for Ask filled, Ask error and Generate filled, but not for Options open, loading, regenerating or saved. The layout audit doesn't depend on theme, so it covers those, but their dark look isn't in the images.
• Recapture after the fix. Tablet and desktop AFTER shots were taken before the min-w-fit fix. That fix only applies below 640px, so those widths render the same.
• Repo size. The 42 montages add 17 MB to git history. The capture and montage scripts live in the gitignored .verify/, so the run can't be reproduced from the repo.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Programcode/DebateLab
• Branch: design/menu-layout-cleanup
• File: .coderabbit.yaml
• Commit: 56097ef
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: CHILL
• Plan: Free
• Run ID: 2233436e-d3b2-40d5-b334-64f038f699ce

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Essentials by visiting https://app.coderabbit.ai/settings/billing.

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.