Skip to content

fix(a11y): fit the 404 page on phones and declare the page language - #216

Merged
BIA3IA merged 5 commits into
feat/home-visual-refinementfrom
feat/not-found-visual-refinement
Nov 2, 2026
Merged

fix(a11y): fit the 404 page on phones and declare the page language#216
BIA3IA merged 5 commits into
feat/home-visual-refinementfrom
feat/not-found-visual-refinement

Conversation

@viganogabriele

@viganogabriele viganogabriele commented Oct 31, 2026

Copy link
Copy Markdown
Contributor

Stacked on #215 (footer): feat/footer-visual-refinement. This is the last part of the shared site chrome.

Changes

  • 404 on phones: the message was headline-large (32 px) with no side padding, so at 320 px it ran edge to edge. It now has the 24 px page gutter, headline-extrasmall on phones (headline-large from sm) and text-balance, with vertical padding so it doesn't sit under the header on short screens. The content and the "Home" button are unchanged, and the page stays faithful to the Figma "error page" (1374:1907).
  • Document language: <html lang="en"> → "it". The site is in Italian, so screen readers were reading it with English pronunciation, and hyphenation and text-balance used English rules.

Screenshots (before | after)

320
402
768
1440

Verification

  • Pages: lang="it" and exactly one h1 on all 17 checked routes. No overflow on the 404 from 320 to 1920 px.
  • Checks: on the full stack, pnpm check, pnpm build, pnpm typecheck and the tests (3/3) all pass.

Merge order

#214 → #215 → this. The pr-assets/not-found-visual-refinement branch only holds the screenshots.

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Oct 31, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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: dccfca8d-8d33-4e72-ab69-8014c7552053

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

@viganogabriele
viganogabriele force-pushed the feat/not-found-visual-refinement branch from 16dc339 to bb7541d Compare October 31, 2026 11:25
@viganogabriele viganogabriele mentioned this pull request Oct 31, 2026
Draft
18 tasks
@viganogabriele
viganogabriele marked this pull request as ready for review October 31, 2026 17:54
@viganogabriele viganogabriele mentioned this pull request Oct 31, 2026
Merged
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from bb7541d to fcecb70 Compare November 2, 2026 13:53
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from 246204d to 38f08a4 Compare November 2, 2026 14:06
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from fcecb70 to 43f9e76 Compare November 2, 2026 14:06
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from 38f08a4 to a68245c Compare November 2, 2026 14:20
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from 43f9e76 to 3995c1d Compare November 2, 2026 14:20
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from a68245c to c15b5d6 Compare November 2, 2026 14:32
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from 3995c1d to 152a419 Compare November 2, 2026 14:32
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from c15b5d6 to cafc9f3 Compare November 2, 2026 14:35
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch 3 times, most recently from a0f06e7 to f175d2c Compare November 2, 2026 15:00
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch 2 times, most recently from 8f144eb to eb0d4c3 Compare November 2, 2026 15:02
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch 2 times, most recently from 7c880d8 to 09acb0a Compare November 2, 2026 15:14
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch 2 times, most recently from 2119d69 to ad920d0 Compare November 2, 2026 15:18
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from 09acb0a to 069e3e6 Compare November 2, 2026 15:19
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from ad920d0 to e3005d4 Compare November 2, 2026 15:26
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from 069e3e6 to e676a11 Compare November 2, 2026 15:26
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from e3005d4 to 93afac2 Compare November 2, 2026 15:28
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from e676a11 to a39582e Compare November 2, 2026 15:28
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from 93afac2 to d660306 Compare November 2, 2026 16:03
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from a39582e to c5eb343 Compare November 2, 2026 16:03
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from d660306 to e0df443 Compare November 2, 2026 16:05
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from c5eb343 to 92f4d31 Compare November 2, 2026 16:05
viganogabriele and others added 5 commits November 2, 2026 16:19
@viganogabriele @claude @BIA3IA
feat(footer): rebuild the footer on the designers' Figma exploration
88ed887 
The footer was the official component's bare layout: a 57px blue
gradient title, 24px icon targets, two link columns ~320px apart and
three "#" policy links. It now follows "footer-francesca" (593:2123),
the version used across the Figma pages: "Keep in touch!" with the
social pill, a site map with the association's documents and the 5x1000
card, the contact addresses, the join and report-a-bug calls to action,
and a hairline legal row.

Only existing content is used: no TikTok, no language selector, and the
Statuto and Regolamento interno in place of policy pages that don't
exist. The Su di noi support section gets an anchor for the 5x1000 card.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@viganogabriele @claude @BIA3IA
feat(footer): set the footer in a single glass panel
f815c60 
The footer content now sits in one rounded glass panel inside the page
gutters, closing the page as a single object like the header pill opens
it. The 5x1000 card becomes a lighter tile instead of glass on glass and
stacks where its column is narrow; the social targets go to 36px below
`sm` so the row stays whole at 320px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@BIA3IA
fix(footer): keep the content inside the panel at 320px and reuse wha…
1a4fb4b 
…t exists

- The document links can wrap again: their nowrap set a 276px minimum
  that pushed the grid and the 5x1000 card out of the panel up to 356px.
- The social pill is a light surface instead of glass on the glass
  panel, and CardMultipleIcons is styled for its only use rather than
  overridden from outside with [&>div] selectors.
- The two calls to action align at the bottom when one heading wraps.
- The title uses SECTION_TITLE; the statute, regulations and materials
  URLs come from their existing constants.
- English labels carry lang="en"; the copyright years use an en dash.
- Comments that narrated Figma or the change are removed.
@viganogabriele @claude @BIA3IA
fix(a11y): fit the 404 page on phones and declare the page language
b39a9bc 
The 404 message was 32px with no side padding, so it ran edge to edge at
320px: it gets the page gutters, a smaller size on phones and balanced
lines. `<html lang>` was "en" on an Italian site, so screen readers and
hyphenation used English rules; it is now "it".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@BIA3IA
fix(not-found): keep the Home button above the fold on small phones
17968c0 
py-40 made the page 764px tall at 320x568 and pushed the button below
the fold. The top padding still clears the fixed header.
@BIA3IA
BIA3IA force-pushed the feat/footer-visual-refinement branch from d857698 to 1a4fb4b Compare November 2, 2026 16:19
@BIA3IA
BIA3IA force-pushed the feat/not-found-visual-refinement branch from 92f4d31 to 17968c0 Compare November 2, 2026 16:19
Base automatically changed from feat/footer-visual-refinement to feat/home-visual-refinement November 2, 2026 16:20
@BIA3IA
BIA3IA merged commit 29374be into feat/home-visual-refinement Nov 2, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@viganogabriele @BIA3IA