Hero editor: fullscreen landing, remove two-card row, quick links into hero #28

wtclaude · 2026-07-04T02:50:12Z

wtclaude commented

2026-07-04 02:50:12 +00:00

Summary

Removes the two-card destination row ("Public Portal / MysticMoon Website" and "Knowledge Base / MysticMoon Wiki") and the below-hero quick-links nav from the landing page (Portal.jsx). The hero is now the entire landing page, with nothing rendered after it (aside from the site-wide footer, which is shared chrome on every public page and out of scope here).
Hero section now uses flex: 1 + min-height: 100vh instead of the old clamp(600px,72vh,860px) fixed height.
Dropped overflow: hidden on the hero section. On mobile browsers, 100vh can compute smaller than window.innerHeight (address-bar/viewport quirk) - with overflow: hidden the wrapped quick-links text was getting clipped at the bottom edge. Verified this was a real, reproducible clip before the fix and confirmed it renders fully (in the safety gap before the footer) after.
Moves the 5 quick links (News, Screenshots, Five on Friday, Monthly Newsletter, About) into the hero editor's data model, as a third buttons element appended in defaultLayout() (heroLayout.js). This reuses the existing buttons element type/component (same one used for "Enter the Website" / "Open the Wiki") - no changes to the hero editor's schema or admin UI code - so the links are fully editable/movable/removable through the existing Hero Editor out of the box.
Since the live hero_layout setting is currently empty (unpublished), this new default takes effect immediately on merge with no DB migration needed. If a custom hero has already been published, an admin can add the same quick-links button set manually via "+ Buttons" in the editor.

Test plan

Ran the app locally (client :5173, server :3000, MariaDB via docker) and loaded / - confirmed the two-card row and old quick-links nav are gone, and the hero fills the page.
Verified in-browser at desktop (1280x800), tablet (768x1024), and mobile viewport sizes: background-size: cover holds, hero height matches 100vh, and the quick-links row no longer gets clipped (previously reproduced the clipping bug with overflow: hidden, confirmed fixed after removing it).
Logged into /admin/hero and confirmed the quick-links element renders in the editor canvas as a normal buttons element (verified against the code-level default; a local dev-only draft in the DB predates this change and doesn't yet include it, which is expected - it's editable through the same existing Buttons panel as the other button elements).
npm run build in client/ passes clean.
Live-database publish/smoke test (recommend before deploying if a custom hero is already published in production).

🤖 Generated with Claude Code

## Summary - Removes the two-card destination row ("Public Portal / MysticMoon Website" and "Knowledge Base / MysticMoon Wiki") and the below-hero quick-links nav from the landing page (`Portal.jsx`). The hero is now the entire landing page, with nothing rendered after it (aside from the site-wide footer, which is shared chrome on every public page and out of scope here). - Hero section now uses `flex: 1` + `min-height: 100vh` instead of the old `clamp(600px,72vh,860px)` fixed height. - Dropped `overflow: hidden` on the hero section. On mobile browsers, `100vh` can compute *smaller* than `window.innerHeight` (address-bar/viewport quirk) - with `overflow: hidden` the wrapped quick-links text was getting clipped at the bottom edge. Verified this was a real, reproducible clip before the fix and confirmed it renders fully (in the safety gap before the footer) after. - Moves the 5 quick links (News, Screenshots, Five on Friday, Monthly Newsletter, About) into the hero editor's data model, as a third `buttons` element appended in `defaultLayout()` (`heroLayout.js`). This reuses the existing `buttons` element type/component (same one used for "Enter the Website" / "Open the Wiki") - **no changes to the hero editor's schema or admin UI code** - so the links are fully editable/movable/removable through the existing Hero Editor out of the box. - Since the live `hero_layout` setting is currently empty (unpublished), this new default takes effect immediately on merge with no DB migration needed. If a custom hero has already been published, an admin can add the same quick-links button set manually via "+ Buttons" in the editor. ## Test plan - [x] Ran the app locally (client :5173, server :3000, MariaDB via docker) and loaded `/` - confirmed the two-card row and old quick-links nav are gone, and the hero fills the page. - [x] Verified in-browser at desktop (1280x800), tablet (768x1024), and mobile viewport sizes: `background-size: cover` holds, hero height matches `100vh`, and the quick-links row no longer gets clipped (previously reproduced the clipping bug with `overflow: hidden`, confirmed fixed after removing it). - [x] Logged into `/admin/hero` and confirmed the quick-links element renders in the editor canvas as a normal `buttons` element (verified against the code-level default; a local dev-only draft in the DB predates this change and doesn't yet include it, which is expected - it's editable through the same existing Buttons panel as the other button elements). - [x] `npm run build` in `client/` passes clean. - [ ] Live-database publish/smoke test (recommend before deploying if a custom hero is already published in production). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

wtclaude added 1 commit 2026-07-04 02:50:14 +00:00

Make hero the full landing page; move quick links into hero editor 0318d6fe9f

Remove the two-card destination row and the below-hero quick-links nav
from the portal so the hero fills the viewport with nothing rendered
after it. The 5 quick links (News, Screenshots, Five on Friday,
Monthly Newsletter, About) move into the hero editor as a third
buttons element in defaultLayout(), reusing the existing buttons
element type so they stay fully editable with no schema changes.

Also drop overflow:hidden on the hero section: on mobile, 100vh can
compute smaller than window.innerHeight, and with overflow hidden the
wrapped quick-links text was getting clipped at the bottom edge.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

whitlocktech approved these changes 2026-07-04 02:55:39 +00:00

whitlocktech merged commit ad7aebb3ba into main

2026-07-04 02:55:52 +00:00

whitlocktech deleted branch feature/hero-fullscreen-landing

2026-07-04 02:55:53 +00:00

whitlocktech referenced this issue from a commit

2026-07-04 02:55:53 +00:00

Merge pull request 'Hero editor: fullscreen landing, remove two-card row, quick links into hero' (#28) from feature/hero-fullscreen-landing into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/website#28