Modernise the status page design

[jbrooksuk]

Summary

A pass over the status page UI to give every component a cohesive, modern card aesthetic and tighter, more refined typography.

Cards & layout

• Rounded-lg surfaces, hairline ring borders (ring-zinc-900/10 / dark:ring-white/15), subtle gradient accent line at the top of every card
• Tightened mobile padding throughout for better fit on small laptops/tablets
• Strengthened ring/divider opacity so hairlines don't disappear on lower-DPI displays

Metric

• New card layout with a segmented pill period selector replacing the native dropdown
• Chart fill + line now derive from --accent (handles oklch/rgb/hsl theme values) so the chart matches the configured colour
• Filled area, tightened tension, hidden legend, dark capsule tooltip, soft horizontal grid

Incidents

• Cards span the full container width, matching the empty "No incidents reported" state
• Dashed timeline thread + status icons live in the page gutter outside each card; hidden below lg where there's no room
• Incident messages with no updates inline in the header (no duplicated initial-report fallback entry)
• Date heading reworked as a centred section divider with a calendar icon and gradient hairlines on each side
• Timeline pagination consolidated into a single centred segmented pill control

Components & schedules

• Component group header is a single full-width disclosure button with a tinted background, larger right-aligned chevron, and a "components affected" pill
• Component rows: description moved into the info popover, last-updated is a styled hover tooltip on the badge, the entire row is a stretched link when the component has a URL ("View details" removed)
• Schedules redesigned to match the same card vocabulary

Header & footer

• Header uses a frosted hairline bar with a refined accent dashboard pill and softer logout typography
• Footer pinned to the bottom with a monospaced version chip, lighter timezone line, and the same hairline border tone

About

• Title scales text-2xl sm:text-3xl lg:text-4xl
• Body uses the full Tailwind Typography plugin with explicit prose modifiers (paragraphs, headings, links, code chips); links are always underlined

Test plan

• Verify the status page renders correctly in light and dark mode
• Confirm metric chart line + fill use the configured accent colour for each theme
• Check incident timeline at sm/md/lg breakpoints (timeline thread should only appear at lg+)
• Confirm the dashboard pill, segmented period selector, and pagination pills behave as expected
• Tab through component rows and verify the stretched link, info popover, and badge tooltip remain independently accessible

🤖 Generated with Claude Code