Public site responsive audit: wider shell, left/right hero, aligned nav - #31
Conversation
The whole public site (home, record detail, listings, landing pages) shared one 720px-wide <main>, which wasted a lot of horizontal space on desktop and capped item grids to ~2 columns regardless of viewport width. The nav bar had no matching container, so it stretched edge-to-edge while the page content sat in a narrow centered column below it — inconsistent alignment. - RecordPageLayout: widen the shared page shell from 720px to 1120px. Grids (item-feed, home-page sections, gallery/landing grids) now use the full width and naturally lay out more columns via their existing `auto-fill, minmax(...)` tracks — no JS/markup changes needed there. Long-form reading elements (title, body, meta, tags, cover, caption) get an additional 760px cap so article text doesn't stretch to uncomfortable line lengths, but stay left-aligned (not centered) so a listing page's H1 still lines up with its grid underneath. - PublicNav: wrap nav content in `.public-nav__inner`, capped to the same 1120px shell and centered, so the nav lines up with the page content instead of being full-bleed above a narrower column. - Home hero (HomePage.jsx / RecordPageLayout CSS): image left, title+copy right on desktop (>=768px), stacked (image on top) on mobile — was a single vertical stack with the image as a top banner regardless of viewport. Also added the missing `.home-hero__copy` wrapper to the no-homePage-singleton fallback branch, which the new 2-column grid depends on to keep title+description together in the right column. Scoped to the public site templates; admin app untouched.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0b6e12776e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| /* Desktop: image left, copy right. Mobile stays stacked (image on top). */ | ||
| @media (min-width: 768px) { | ||
| .home-hero { | ||
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
There was a problem hiding this comment.
Keep text-only home heroes full width
When homePage.image or channel.image is empty, HomePage.jsx renders only the .home-hero__copy child inside .home-hero. This desktop rule still forces two columns for every hero, so the text-only hero occupies just one half of the card and leaves an empty half-width column at min-width: 768px, regressing the documented/tested text-only home case. Apply the two-column template only when an image is present, or make the copy span both columns when the banner is absent.
Useful? React with 👍 / 👎.
| long-form reading elements are additionally capped to a comfortable | ||
| line length and left-aligned within that shell (no forced centering, | ||
| so a listing page's title lines up with its grid below it). */ | ||
| .record-page__cover, |
There was a problem hiding this comment.
Let photo covers use the widened shell
On photo detail pages, PhotoPage renders the primary photo with .record-page__cover, so adding that class to the 760px reading cap keeps photos almost as narrow as before inside the new 1120px shell. For high-resolution photos on desktop this leaves the main content with unused space, even though the responsive audit covers photo detail pages and the image itself is not long-form text that needs the line-length cap.
Useful? React with 👍 / 👎.
Summary
UI audit of the public-facing site (home, blog/photo/podcast detail, listings, landing pages, galleries) for desktop wasted space and modern responsive layout, as requested.
Everything routes through one shared
RecordPageLayout(edge-src/web/RecordPageLayout.jsx), so this was fixable in one place rather than per-page:.record-page(the shared<main>) went from 720px → 1120px max-width. Item grids (item-feed, home-page sections, gallery/landing grids) already usegrid-template-columns: repeat(auto-fill, minmax(...)), so they automatically lay out more columns at the new width — no markup changes needed for those.<h1>still lines up with its grid underneath (rather than centering awkwardly above a left-aligned grid).PublicNavpreviously had no max-width — full-bleed bar above a narrow centered page below it. Wrapped its content in.public-nav__inner, capped to the same 1120px shell, so nav and page content now align..home-hero(the home_page singleton's hero) is now a 2-column grid on desktop (≥768px) — image left, title+copy right — and stacks (image on top) on mobile. Previously always stacked regardless of viewport, wasting horizontal space on desktop. Also fixed the no-homePage-singleton fallback branch inHomePage.jsx, which was missing the.home-hero__copywrapper the new grid needs to keep title+description together in the right column.Scoped to the public site (edge-src/web); admin app untouched.
Test plan
yarn test— 69/69 suites, 412/412 tests pass locally.vars.toml/Cloudflare secrets in this worktree) — please eyeball desktop + mobile after deploying via your GitHub Actions pipeline.