Mobile layout: no text is cut, low-end mode skips the map, saved trips open from the menu

[davd-gzl]

5/10, medium

Four defects in how the app lays out on a phone and on a slow device. None changes a search result: each changes what a reader can see, what a low-end device downloads, or whether a screen can be reached at all.

Two small fixes ride along. In Arabic the sort menu's arrow sat on its label, so every control with a left or right side now uses the reading direction. The dark theme now tells the browser it is dark, so native controls follow it.

This sits on the history branch, #73, and merges after it. Every capture below is Chromium headless, main 5e514c5 on the left and this branch on the right.

---

Seven text rules: names end in an ellipsis

A via chip, the search bar, a leg name, a tour route and an airport name each ended in "…" once the text outgrew its box: .chip-via with a 14ch cap, .mc-route, .msearch-text and four more. Across 12 screens from 360 to 1366px, 197 strings were cut on phones and 130 on desktop. Each now wraps in full, and the search bar takes two balanced lines so a date is never split across them. npm run verify now fails on any cut text at 360, 390 and 1100px.

A connection's via chip, 390px wide.

The phone search bar on a long route, 390px wide.

A connection's second leg, 360px wide.

A Multi-city leg header, 390px wide.

A browse row for an airport station, 1100px wide.

---

prerender: low-end mode still downloads the map

The prerendered page was captured from the live app with the map on, so every visitor parsed Leaflet's markup and the map chunk's preload links. A phone in low-end mode, which never shows the map, fetched the map code, its stylesheet and a tile. The capture now runs with the map off.

---

Header menu: saved trips cannot be reached on a phone

Saved trips and favorites sit in the results drawer, which only the results screen shows on a phone, and the header menu had no entry for them. The menu now opens the saved page from any screen. A desktop already shows both cards in the results column, so the entry is phone-only.

The header menu, 390px wide.

---

setupDrawer: the results sheet sizes itself from a hidden map

setupDrawer measured from the top of the map, which the form screen hides, so the first half-height sheet was 461px and the same sheet 420px after two taps. Fully raised, it covered the search bar. The sheet now measures from below the search bar and again whenever the bar appears or wraps, so it takes the same height every time and stops under the bar.

The results sheet fully raised, 390x844.

---

Fonts: eight security-policy errors on every load

Vite inlines assets under 4 KB as data: URLs, which put the small font subsets inside the stylesheet, and the page's Content-Security-Policy allows fonts from its own origin only. Each load logged 8 blocked fonts. Fonts now always ship as files, so the policy stays as strict as it was and npm run verify fails on any policy error.