Problem
At 320 px (iPhone SE, and the narrowest width the app currently survives without overflow) two things degrade:
- the header title wraps to two lines — "QR Code Generator" breaks after "QR Code", growing the header and pushing the canvas down
- the payload readout truncates to almost nothing —
https://fro… · 28 chars for a 28-character URL, so the readout stops telling you what is actually encoded
Everything remains reachable and there is no horizontal overflow; all five type buttons fit (verified after #59). This is legibility, not breakage.
Expected
At 320 px the title stays on one line (shorter mark, smaller type, or drop the wordmark for the logo alone), and the readout shows enough of the payload to be worth reading — or gives up the character count to buy room.
Evidence
Chromium at 320 × 568 against a1bcba3. Type row rightmost edge 304 px of 320, no label clipped, document.body.scrollWidth === clientWidth.
Problem
At 320 px (iPhone SE, and the narrowest width the app currently survives without overflow) two things degrade:
https://fro… · 28 charsfor a 28-character URL, so the readout stops telling you what is actually encodedEverything remains reachable and there is no horizontal overflow; all five type buttons fit (verified after #59). This is legibility, not breakage.
Expected
At 320 px the title stays on one line (shorter mark, smaller type, or drop the wordmark for the logo alone), and the readout shows enough of the payload to be worth reading — or gives up the character count to buy room.
Evidence
Chromium at 320 × 568 against
a1bcba3. Type row rightmost edge 304 px of 320, no label clipped,document.body.scrollWidth === clientWidth.