Mobile layout #4

New issue

Closed

opened 2026-08-23 15:54:35 +02:00 by myrmidex · 1 comment

myrmidex commented

2026-08-23 15:54:35 +02:00

Owner

No description provided.

myrmidex added this to the v0.1.0 milestone 2026-08-23 15:54:35 +02:00

myrmidex added the

enhancement

label 2026-08-23 15:54:35 +02:00

myrmidex commented

2026-08-23 21:38:27 +02:00

Author

Owner

Done — `24fa771`

Two symptoms reported: the header wrapped to a second line on a phone, and so did the footer.

Header

Was text-5xl with tracking-widest unconditionally. "> ANAGRAM FINDER" at that size needs
roughly 538px, against the ~327px a 375px phone offers after the body's p-6 — hence the wrap.

Now text-3xl sm:text-5xl lg:text-6xl, with tracking-wider below lg. Desktop is slightly
larger than before rather than unchanged.

Known edge: at text-3xl the heading needs ~312px, so it fits from 360px up but would wrap
again on a 320px screen (original iPhone SE). Accepted after checking on a real device.

Footer

Stacked and shrank below sm:, then simplified once it had a single child
[SOURCE] removed; the app name links to the repo instead, keeping rel="license" so the
licence stays machine-discoverable
Centred
mt-auto holds it at the viewport bottom when content is short, while still scrolling away
normally on a long results page — deliberately not a fixed overlay, which would eat screen
space on every scroll of a 447-row result set
Negative bottom margin cancels the body's padding so the text sits evenly between the rule
and the page edge

Verified on a real device rather than emulation.

## Done — `24fa771` Two symptoms reported: the header wrapped to a second line on a phone, and so did the footer. ### Header Was `text-5xl` with `tracking-widest` unconditionally. "> ANAGRAM FINDER" at that size needs roughly 538px, against the ~327px a 375px phone offers after the body's `p-6` — hence the wrap. Now `text-3xl sm:text-5xl lg:text-6xl`, with `tracking-wider` below `lg`. Desktop is slightly larger than before rather than unchanged. **Known edge:** at `text-3xl` the heading needs ~312px, so it fits from 360px up but would wrap again on a 320px screen (original iPhone SE). Accepted after checking on a real device. ### Footer - Stacked and shrank below `sm:`, then simplified once it had a single child - `[SOURCE]` removed; the app name links to the repo instead, keeping `rel="license"` so the licence stays machine-discoverable - Centred - `mt-auto` holds it at the viewport bottom when content is short, while still scrolling away normally on a long results page — deliberately not a fixed overlay, which would eat screen space on every scroll of a 447-row result set - Negative bottom margin cancels the body's padding so the text sits evenly between the rule and the page edge Verified on a real device rather than emulation.

myrmidex closed this issue

2026-08-23 21:38:34 +02:00