Files
worldmonitor/server
Elie Habib 8fc302abd9 fix(brief): mobile layout — stack story callout, floor digest typography (#3180)
* fix(brief): mobile layout — stack story callout, floor digest typography

On viewports <=640px the 55/45 story grid cramped both the headline and
the "Why this is important" callout to ~45% width each, and several
digest rules used raw vw units (blockquote 2vw, threads 1.55vw) that
collapsed to ~7-8px on a 393px iPhone frame before the browser min
clamped them to barely-readable.

Appends a single @media (max-width: 640px) block to the renderer's
STYLE_BLOCK:

- .story becomes a flex column — callout stacks under the headline,
  no column squeeze. Headline goes full-width at 9.5vw.
- Digest blockquote, threads, signals, and stat rows get max(Npx, Nvw)
  floors so they never render below ~15-17px regardless of viewport.
- Running-head stacks on digest and the absolute page-number gets
  right-hand clearance so they stop overlapping.
- Tags and source labels pinned to 11px (were scaling down with vw).

CSS-only; no envelope, no HTML structure, no new classes. All 30
renderBriefMagazine tests still pass.

* fix(brief): raise mobile digest px floors and running-head clearance

Two P2 findings from PR review on #3180:

1. .digest .running-head padding-right: 18vw left essentially zero
   clearance from the absolute .page-number block on iPhone SE (375px)
   and common Android (360px). Bumped to 22vw (~79px at 360px) which
   accommodates "09 / 12" in IBM Plex Mono at the right:5vw offset
   with a one-vw safety margin.

2. Mobile overrides were lowering base-rule px floors (thread 17px to
   15px, signal 18px to 15px). On viewports <375px this rendered
   digest body text smaller than desktop. Kept the px floors at or
   above the base rules so effective size only ever goes up on mobile.
2026-04-18 21:37:40 +04:00
..