web UI: style content screens (press, events, newsletter)

What to build

Style the five simple content-list screens: src/routes/{press,events,faq,staff,newsletter}/+page.svelte. These are structurally similar (fetch-and-list content, no interactivity beyond navigation) — worth a shared card/list-item pattern rather than five independent designs. Reuse #35's tokens.

Acceptance criteria

All five content screens restyled using web UI: install Tailwind CSS + design tokens + styled shared layout #35's tokens, sharing a consistent list/card pattern
Staff directory photos (from profile_image URLs) display well if present, degrade gracefully if absent
pnpm --filter web check clean, CI passes

Blocked by

#35 (Tailwind + design tokens + shared layout)

Scope change (2026-08-19): FAQ and Staff Directory are cut from the product entirely — see #50. This issue now covers styling press, events, and newsletter only. Do not style /faq or /staff; they will be deleted.

web UX: shared component layer, loading/error states, and nav hierarc…

Closes #41

Scope change acknowledged

#41's original body listed five screens (press/events/faq/staff/newsletter). Per the issue's 2026-08-19 comment, FAQ and Staff Directory are cut from the product entirely (#50/#51, already deleted from the codebase before this branch started). This PR styles only press, events, newsletter. Repo-wide grep for remnants before starting, zero hits:

grep -ril "faq\|staff" web/src shared/src mobile/src
# (no output)

Acceptance criteria (as descoped)

Press, events, and newsletter restyled with web UI: install Tailwind CSS + design tokens + styled shared layout #35/web UX: shared component layer, loading/error states, and nav hierarchy in the app shell #43's shared component classes (.page-title, .label-rule, .card, .empty-state, .badge), sharing one list/card pattern instead of independent bare <ul><li> markup on each screen.
~~Staff directory photos display well if present, degrade gracefully if absent~~ — void, staff directory is cut. Generalized the same principle to the two screens that do carry remote images: press release images and event featured images. Both wrapped in {#if} (absent → no <img> at all, no broken-image icon) and, for present images, object-contain (not object-cover) so nothing gets cropped. Verified against live upstream data during the check below that UMass Dining's event images are ~1024×432 banners, not square thumbnails — a fixed square object-cover box would have sliced most of the banner off, so events get a wider h-16 w-28 box than press's h-16 w-16.
pnpm --filter web check clean (0 errors, 0 warnings, 396 files).
CI: this diff only touches files under web/, so the CI lanes it can affect are web-check and e2e (shared/mobile/supabase-* jobs are untouched and unaffected). Both run clean locally, see below; I don't have a way to trigger the GitHub Actions run itself from here, so the PR checks are the live confirmation.

Anonymous-first / no auth gates

Zero session/auth code in any of the three +page.ts/+page.svelte files, unchanged from before this PR — these are public content screens fetched via /api/{press,events,newsletter}, no auth.uid() or session check anywhere in the diff.

What changed

web/src/routes/press/+page.svelte
web/src/routes/events/+page.svelte
web/src/routes/newsletter/+page.svelte
web/e2e/content-screens.spec.ts (new)

Not touched: web/src/app.css, web/src/routes/+layout.svelte, any other route, any other e2e spec.

Red/green TDD evidence

Wrote content-screens.spec.ts first, against the unstyled baseline pages. 6 of 9 tests are new UI behavior (styling classes that didn't exist yet) and went red naturally:

PORT=4304 npx playwright test e2e/content-screens.spec.ts --reporter=line
  6 failed
    press › releases render as cards sharing the site's list/card pattern...
    press › no releases shows the shared empty-state panel...
    events › events render as cards with a featured badge...
    events › no events shows the shared empty-state panel
    newsletter › issues render as cards linking out to the external archive
    newsletter › no issues shows the shared empty-state panel
  3 passed   # the 3 upstream-error-path tests -- pre-existing +error.svelte/+page.ts
             # behavior, so these passed immediately rather than going red naturally

The 3 error-path tests exercise pre-existing behavior (the throw error(...) in each +page.ts, and the shared +error.svelte from #43), so per red-green TDD they needed a one-line mutation to prove the test actually catches a regression, not just a false positive. For each of press/events/newsletter, temporarily replaced if (!res.ok) throw error(...) with if (!res.ok) return { X: [] } (silently swallow the failure instead of erroring), ran just that test, confirmed red, then reverted:

# press (mutated: return { releases: [] } instead of throwing)
1 failed — press › an upstream failure renders the shared error page...
  Error: expect(locator).toBeVisible() failed
  Locator: getByRole('heading', { name: /Couldn.t reach UMass Dining/ })
  Error: element(s) not found

# events (same mutation)
1 failed — events › an upstream failure renders the shared error page
  Error: expect(locator).toBeVisible() failed
  Locator: getByRole('heading', { name: /Couldn.t reach UMass Dining/ })
  Error: element(s) not found

# newsletter (same mutation)
1 failed — newsletter › an upstream failure renders the shared error page
  Error: expect(locator).toBeVisible() failed
  Locator: getByRole('heading', { name: /Couldn.t reach UMass Dining/ })
  Error: element(s) not found

Reverted all three +page.ts files immediately after each probe (git status confirmed clean before implementing the styling).

Implemented the three +page.svelte files, re-ran the full new spec: 9/9 green. Then the full suite (26 tests across all specs, including the sibling-agent-owned shell.spec.ts, rank.spec.ts, filters.spec.ts, favorites.spec.ts, halls-menu.spec.ts, vertical-slice.spec.ts) on PORT=4304: 26/26 green, confirming no regressions to shell nav, error page, or other screens.

Verification against live data

Ran the dev server (PORT=4304) and curled /press, /events, /newsletter directly — SvelteKit's SSR load hit the real umassdining.com upstream (not mocked for this check) and rendered real press releases, events, and newsletter issues through the new .card/.page-title/.empty-state markup. Confirmed the event-image aspect-ratio fix against a real banner (Summer Hours Banner_0.jpg, downloaded and measured at 1024×432 with PIL) — object-contain was the right call over object-cover for that aspect ratio.

Lanes run

PORT=4304 npx playwright test (all 26 specs) — pass
pnpm --filter web check — clean, 0 errors/warnings
pnpm --filter web build — succeeds (pre-existing adapter-auto "could not detect platform" notice only, unrelated to this diff)
Not run: shared/mobile/supabase-* CI jobs — no files under those trees changed, so they're unaffected by this diff.

Not merging

Per dispatch instructions, this PR is left open for review, not merged.

web UI: style content screens + sanitize unresolvable upstream image …

Navigation Menu

Repository navigation

web UI: style content screens (press, events, newsletter) #41

What to build

Acceptance criteria

Blocked by

Scope change acknowledged

Acceptance criteria (as descoped)

Anonymous-first / no auth gates

What changed

Red/green TDD evidence

Verification against live data

Lanes run

Not merging

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

web UI: style content screens (press, events, newsletter) #41

Description

What to build

Acceptance criteria

Blocked by

Activity

TSVRN9 commented on Aug 19, 2026

TSVRN9 commented on Aug 19, 2026

Scope change acknowledged

Acceptance criteria (as descoped)

Anonymous-first / no auth gates

What changed

Red/green TDD evidence

Verification against live data

Lanes run

Not merging

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions