timescale.info#58 · Mobile: wider timeline, compact scale and perceived-size ruler
- timeline-app
- pull request
Fixes #42. **Margins.** On screens ≤650 px wide the timeline card goes edge to edge, the ruler keeps 20 px beside it (was 48 px each side, more than a quarter of a phone's stage), and the toolbar is one horizontally scrolling row instead of three wrapped rows. The stage is `max(330px, 52svh)` tall. On phones held sideways (`max-height: 500px` landscape), the toolbar is one row and the stage fills the screen height (`100svh − 56px`). **Density.** Phone screens in either orientation open at a 0.75 content scale (markers, labels, ruler text), and the grouping distance scales with it, so moments that were merged into "3"/"2" bubbles now show individually. Fit, load and comparisons use the base scale. Rotating moves a timeline the reader hasn't pinched to the new base. **Ruler thresholds by apparent size.** Major-label spacing was a fixed 90 px (70 px Gregorian), and minor marks 9 px, regardless of how big the text looked. They now multiply by the on-screen text scale (`PresentationContext.textScale`, from the content scale), with floors of 40 px and 6 px. Smaller text fits more labels, on phones and also after a vertical pinch on desktop. Desktop at scale 1 is unchanged. Before → after at 390×844: the stage starts at x=64 with one ruler label and three merged groups → full width, three labels plus minor marks, and individual moments. Tests: `layout-browser.mjs` checks the inset, base scale per size and rotation, full width when upright and full height when sideways. `ruler.test.mjs` covers more labels at smaller text, the 6 px mark floor and validation. Unit, browser and offline suites pass in Chromium and Firefox.
Sources
Open #58 · Mobile: wider timeline, compact scale and perceived-size ruler in the timeline