[viganogabriele]

Part of the stacked visual-refinement series. Base is #209 (/matricole); merge after it. This PR covers /associations (Figma desktop 2306:5313, mobile 3498:2836) and one shared fix to Hero.

What changes

Logos are honest

• An association without a logo used to show ESN's logo: associations-list.tsx fell back to the logo from the Figma example (audit R10).
• It now shows its initials ("Lista Aperta…" → LA) in the same white circle real logos sit in.
• The unused placeholder public/logos/esn.svg is removed.
• Logos are decorative (alt="") because the name is right next to them.

Accordion

• Padding stays the same open or closed. Before, opening an item animated the padding from 24 to 64 px and the name jumped sideways. The height animation stays.
• Name sizes: 20 px on phones, 22 on small tablets and 28 from md, all Poppins. Before it was 22 px, then 45 px from md; at 768 px the longer names wrapped onto three lines.
• Logo sizes: 40 / 48 / 64 px.
• Description:
  • from md it lines up with the name;
  • it is capped at a readable measure (max-w-3xl);
  • on phones it uses the full card width (before, a 64 px inset left about 140 px of text per line at 320).
• Social links:
  • "Segui l'associazione" loses its blue text gradient: the style guide allows a decorated background or coloured text, not both;
  • the block is shown only when there are links;
  • the icon links get accessible names, 40 px targets, rel="noopener noreferrer" and a focus ring.
• Hover means clickable. The header is the clickable part: hovering brightens the item. Keyboard focus rings the whole item; the trigger had outline-none and no visible focus at all.

Page

• The page uses the shared container, hero and rhythm from layout/page.ts, and the list keeps Figma's 1200 px column.
• If the list is empty or the backend can't be reached (the query returns [] for both), the page shows a dashed placeholder with the same style as /projects. Before it was a line of small text in a large empty area.

Shared: Hero title fits its longest word

• A word can't wrap, so "Associazioni" overflowed the screen at 320–360 px and from 640 to 768 px; "Contattaci" overflowed at 320 and 640 px. The browser clipped it, so there was no horizontal scrollbar.
• The title size is now capped so the longest word fits the content width: min(Figma size, (100vw − gutters) / (letters × 0.55em)).
• Titles that already fit keep the Figma sizes (57 / 120 px). Everything from about 800 px up is unchanged.

Hero title	320	390	640	768	1440
Associazioni (before)	57 overflow	57	120 overflow	120 overflow	120
Associazioni (after)	41	52	85	104	120
Contattaci (after)	49	57	102	120	120
Collabora, Matricole (after)	55	57	113	120	120
Team, Unisciti, Progetti, Struttura, FAQ	unchanged

Shared changes and their reach

Change	Other pages affected
ui/hero.tsx: title capped to fit its longest word	Every page with Hero, only at widths where a long word would overflow (table above). Page heights at 320/390/768/1440 are identical on /collabora, /matricole, /team, /join, /projects, /about, /faqs and /guides; /contact at 320 is +2 px.
accordion-association/*: padding, typography, hover/focus	/about "Organi associativi" on phones. association-bodies.tsx now passes its padding and title size explicitly, so it renders as before (screenshot below, heights identical).

Screenshots

Locally the backend is unreachable, so the "before" and "after" lists come from the same temporary fixture: 8 associations with and without logos, a very long name, a long description, and one item without links. The fixture was not committed. The one difference: the first item's "before" logo is the removed esn.svg.

Desktop 1440

Tablet 768

Mobile 390 and 320

Empty / unreachable list (1440)

Idle → hover → keyboard focus

/about association bodies on mobile, before | after (unchanged)

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: clean.
• node --test tests/*.test.mjs: 3/3 pass.
• /associations was checked at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow.

Trade-offs

• Very long single words in an association name can break mid-word on the narrowest phones (overflow-wrap: break-word) rather than run under the chevron. With the fixture this never triggers at 320 px.
• The Hero cap is a heuristic (0.55 em per letter, measured on DM Sans "Contattaci"). It is conservative: titles shrink a little before they would actually overflow.
• The first item is still open by default, as before. Figma shows the list closed, but an open item shows what the list contains.

Deliberately left out

• Search and alphabetical index for long lists, which the audit suggests at 50+ associations: not needed at today's volume, and it is a product decision.
• Ordering follows the backend.
• The English description (descriptionEn) waits on the language switch, which is an open decision.
• No "Sei un'associazione? Scrivici" CTA in the empty state, because that copy and its destination don't exist.

Housekeeping

The screenshots live on pr-assets/associations-visual-refinement so the diff stays code-only; delete that branch after review.

🤖 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: 98237757-4afb-43b3-a306-1f34745ce34d

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