[vpetersson-bot]

What

The Screenly badge showed up as a faint white wordmark on the light paper background. The kit's .brand is position: fixed to the corner of the window. On this light design that only works while the dark hotline band sits flush with the bottom edge.

In near-square browser windows (e.g. 900x1100) the card overflowed. That pushed the band down and left the badge floating over the paper.

Fix

• Badge inside the band. The badge is now an in-flow flex item in the hotline band, set by an unlayered .hotline .brand override, so it always sits on dark.
• Board is one viewport tall. It uses height: 100svh with a minmax(0, 1fr) card row, so the band is always on the bottom edge.
• The card fits itself.
  • Every size inside .card is in --u (1rem * --fit).
  • fitCard() lowers --fit from 1 to a floor of 0.45 until the photo and details fit the card's box.
  • Fit is measured from the children's rects, because a centred column also overflows upwards, which scrollHeight doesn't count.
  • It re-runs on fonts ready and on resize, at most once per frame.

Verification

• Typecheck, lint, 35 tests and the build pass with Bun 1.3.14.
• Rendered in Chrome at 14 window shapes: 480x800, 720x1280, 760x1000, 800x480, 900x1100, 1000x1000, 1080x1920, 1200x1000, 1280x720, 1440x900, 1600x600, 1920x1080, 2160x3840 and 3840x2160.
• At every size the card fits between the masthead and the band, and the badge is on the dark band.
• Every QR code decodes (jsQR) to the UTM-tagged poster URL.

🤖 Generated with Claude Code