fix(alert): readable dark-gold alert card with capped scroll, tucked timestamp, breakable URLs

[JamieRuderman]

Problem

Long SMART service alerts (e.g. the Geyserville-station notice) took over the
whole screen, the gold text was low-contrast and used several inconsistent
shades, the start timestamp floated against the wrapping title, and the long URL
couldn't break — orphaning "at" on its own line.

Changes

ServiceAlert.tsx

• Cap + inner scroll: message is max-h-32 overflow-y-auto overscroll-contain
  — long alerts scroll inside the card instead of pushing the page down.
• One consistent dark gold: icon, title, message, timestamp, and ✕ all use a
  new text-smart-gold-dark (no more mixed /60, /70, /80 opacities). Deep
  enough to read clearly on the pale card in light mode.
• Timestamp placement: ✕ and timestamp now share a right-hand column, so the
  time sits tucked directly under the close button, right-aligned and out of the
  text flow (previously it collided with the ✕ / floated mid-title).
• Break long URLs: break-words on the title and message lets
  sonomamarintrain.org/geyserville wrap, removing the orphaned "at".

Theme (index.css, tailwind.config.ts)

• New --smart-gold-dark token: deep gold 34 74% 38% in light mode, brightened
  to 40 85% 62% in dark mode so the same class stays legible on the dark card.

Verification

• typecheck + eslint clean.
• Browser (mobile, light + dark): all alert text is one dark/gold shade and
  readable, message scrolls internally at the smaller height, ✕ sits top-right
  with the timestamp tucked beneath it, the URL wraps with no "at" orphan, and no
  horizontal overflow. No console errors.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	smart-trip-web	55e8567	Commit Preview URL Branch Preview URL	Jul 13 2026, 07:17 PM