[lgelauff]

Fixes #662

Problem

The voting screens sized the image area as calc(100vw - 450px) next to a fixed 350 px side panel, with no media queries. At viewports of 450 px or narrower (a phone held upright) the image area had zero or negative width, so no image showed. Up to about 700 px it was tiny.

Change

Below 700 px, VoteYesNo.vue and VoteRating.vue now stack the layout: the image takes the full width (50svh high, 60vh fallback) and the description panel goes below it, so the vote buttons are likely visible without scrolling on a portrait phone. The button rows wrap so they can't cause horizontal scroll. Wider layouts are unchanged. VoteRanking.vue and VoteEdit.vue don't use this pattern and are untouched.

Testing

• Rendered both components in a headless Chromium harness with mock data. At 390 px the image is visible and the panel stacks below it. At 800 px and 1280 px the screenshots are pixel-identical to before.
• pytest montage/tests/ 171 passed, 3 xfailed; ESLint and Prettier clean on the two files; npm run build OK.
• Not tested on a real device or with a real Commons image, so please check on a phone.

Not covered

The app header probably overflows horizontally at 390 px. That predates this change and is a separate issue. Phones in landscape wider than 700 px keep the side-by-side layout.

🤖 Generated with Claude Code

[Zaidusyy]

Tested this locally with the real app (backend + this branch's frontend), in a Yes/No round with five real Commons files, two portrait (Tour Eiffel, Mona Lisa) and three landscape:

• 360×740, 390×844 and 412×915: the image shows (landscape files fill the width, portrait ones fit the 50svh height), and Accept/Decline are on screen without scrolling (Accept ends at 650 px on the 360×740 screen, for every file).
• 700 px stacks, 701 px goes back to side by side; 1280 px looks unchanged.
• Phone in landscape (844×390): side by side, buttons visible.
• "Hide panel" works on narrow screens.
• At 390 px the only element wider than the screen is the header's language selector, so the sideways scroll is the header issue you mentioned, not this change.
• Prettier and ESLint pass on both files, vite build is fine.

Two optional thoughts, not blocking: at 701 px the side-by-side image area is only about 250 px wide, narrower than the 350 px panel, so a slightly higher breakpoint might look better there. And with the panel hidden on a phone, the image keeps its 50svh height instead of using the free space. I only ran the Yes/No round; VoteRating has the same CSS block.

[lgelauff]

Thanks @Zaidusyy, both suggestions were right. Pushed f27139d:

• Breakpoint. Below 700 px it stacks as before. Between 700 and 820 px it now also stacks when the screen is upright (a tablet held upright), where the side-by-side image was narrower than the 350 px panel. I kept it to portrait so that phones held sideways (about 800–930 px wide but only ~360–430 px tall) stay side by side: stacked, their image would be only ~180 px high.
• Panel hidden. On a stacked screen, hiding the panel now gives the image the full height (100svh minus header and footer).
• Also made the old-browser fallback 50vh instead of 60vh, so it matches 50svh.

Claude was able to check this in headless Chromium at 701×900, 768×1024, 820×1180 (stacked), 800×360, 844×390, 1024×768, 1280×800 (side by side, unchanged), with the panel shown and hidden: no horizontal scroll, and Accept is within the first screen in every stacked case. Prettier, ESLint and the build pass.

Still untested in a real browser: the Rating round (stars). Same CSS as Yes/No, but if you have a minute to look at one at phone width, that would close the last gap. The header overflow at 390 px is separate; I'll file it.

Written by Claude (Claude Code) on behalf of @lgelauff.