[viganogabriele]

Stacked on #213: feat/guida-matricola-visual-refinement. This is the header part of the shared site chrome. The footer is in #215 and the 404 page and document language are in #216. This PR used to contain all three; it has been split.

Why the glass "didn't work"

The header sat inside the page wrapper in layout.tsx (relative isolate … overflow-clip). In that position Chromium skipped its backdrop, so the glass never blurred anything (the backdrop-filter was set, but nothing was blurred). With the mobile menu or a desktop dropdown open, the page titles read sharp through the links (see the 402 before shot).

I bisected it in the browser: removing isolation alone only helped partly, while rendering the header outside the wrapper fixes it. So <Header /> now renders before the wrapper. The header is fixed, so the layout is unchanged. The glass stays everywhere. The open panels only get a stronger blur (backdrop-blur-xl). An earlier revision of this PR used a solid background instead; that is reverted.

Other changes

• Mobile menu stays open after navigation: fixed. The menu is tied to the page it was opened on, so following a link closes it. Escape closes it too.
• Toggle: it now has aria-expanded, aria-controls and an Italian label, and it is a 40 px target with a focus ring.
• Rows and labels: items are 40 px rows instead of 20 px text, and the group labels lose the blue gradient (style-guide rule: no gradient on small text).
• Current page: the active item gets aria-current="page" and the underline, and on desktop the trigger of its section stays underlined.
• External link icon: "Appunti" leaves the site, so it uses ↗ instead of ›.
• Dead controls removed: the language and theme buttons only ran console.log. There is no i18n, and dark mode is disabled pending design. They can return with those features.
• Logo: it was an h1 on every page, mobile and desktop copies included. It is now a span, with a decorative alt="" and a focus ring.
• One h1 per page: the shared ui/hero.tsx title becomes the h1, so every route has exactly one (checked on 17 routes). Same classes, no visual change.
• Valid list markup: in the desktop dropdown, <ul><Glass><li> becomes <Glass><ul><li>.

Screenshots (before | after, on /storia)

Verification

• Behaviour (Playwright): the menu closes after a link and on Escape, aria-expanded toggles, and there is one h1 per route.
• Overflow: none on the checked routes at 320, 1024 and 1440 px.
• Checks: pnpm check, pnpm build, pnpm typecheck and the tests (3/3) all pass.

Merge order

#199 → … → #213 → this → #215 → #216. The pr-assets/chrome-visual-refinement branch only holds the screenshots.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 7eb1a859-9262-4a7a-ac04-839942ee2c89

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn