[viganogabriele]

Stacked on #207 (feat/projects-visual-refinement) → … → #199. Part of the page-by-page visual refinement. Figma: landing 2782:5643, wizard 3071:6242, results 3082:8078.

What changes

Results page (/groups/didattica/<school>/<level>/<course>)

• The general groups were broken. The four groups for the site, school, level and course sat in one flex-wrap row.
  • On desktop their names overlapped the WhatsApp/Telegram buttons.
  • On phones they shrank to four ~70 px columns of clipped text ("PoliNetw – Annun").
  • They now sit one per row, two per row from lg, as in Figma (2 cards side by side).
• The column narrows from max-w-7xl (1280) to ~1024 px, Figma's list width (~1040 at 1728). Rows of short group names no longer stretch across the screen.
• Header: a new shared GroupsPageHeader lays out back, centred title and close on a 3-column grid.
  • Before, the title was centred under absolutely positioned buttons, so "Ingegneria Informatica" ran under the close button on phones.
  • The header is reused on the extra page.
• Section headers: "Gruppi 24/25" and the count pill are a real h2 row with consistent spacing. The magic margins (md:mt-16.25, md:mt-25.75…) are gone.

Group rows (CardCourseGroup, used only on these two pages)

• Phones: the name and buttons share a row. When the card's content is narrower than 20rem, the name gets its own line and the buttons sit below it.
  • Before, names broke word by word into 3 lines next to four controls.
  • This uses a container query, so the switch depends on the card's width, not the viewport.
• Text: names use text-balance (no orphan "1" in "Analisi Matematica 1") and wrap-break-word as a safety net. The stacked variant is removed.
• Hover: the row itself isn't a link, the platform buttons are. Those buttons now darken on hover, the report flags darken to text-primary, and both have a focus ring.

Hover = clickable (R9)

• Landing cards (Gruppi Didattici / Gruppi Extra) are links and had no hover. They now get the identity hover used by the other link cards.
• Wizard course rows (CardCourse, always rendered inside a link or button) lighten and nudge their chevron.
• Focus rings: the wizard links (levels, courses) now have them.

Wizard

• Phones: the glass panel is transparent and borderless below md, but it kept a 16 px padding. Removing it, plus tighter gaps, lets the step labels fit at 320 px. Before, "TRIENNALE/MAGISTRALE" overflowed into "CORSO".
• The panel itself is unchanged: it's in Figma.

Landing

• "Groups" uses the fluid display size from feat(home): refine homepage layout, proportions and card states #199 and is the page's h1 (it was an h2 with no h1 on the page).

Shared changes and their reach

Change	Other pages affected
WizardShell: no inner padding below md, tighter header gaps on phones	/guides/corso/** (same wizard): checked at 390/1024/1440, same improvement
CardCourse: hover state	wizard course step and the "missing link" report dialog; both render it inside a link/button
CardCourseGroup: layout, stacked prop removed	only /groups/**

Screenshots

The backend isn't reachable locally, so before and after both use the same temporary local fixture: 60 fake groups, site/school/level/course groups, two cohorts, 12 extra groups. The fixture was never committed.

Results page: 1440, 768, 390, 320

Extra groups: 1440, 390

Wizard course step at 320 (step labels)

Landing, 1440

Hover: idle → hover (landing card, course row, Telegram button)

Verification

• pnpm check is clean, pnpm build passes and pnpm typecheck exits 0.
• node --test tests/*.test.mjs: 2/2 pass.
• I checked these routes in the browser at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px, with no horizontal overflow at any width:
  • /groups
  • /groups/didattica, plus its school, level and course steps
  • /groups/extra
  • /guides/corso and its school step

Trade-offs

• On phones every group row is taller: name, then buttons. I preferred this to names fragmented into 3 lines next to four controls. It is the same pattern on every row, so the list stays scannable.
• The list is a little narrower than before on large screens (1024 vs 1280). That is closer to Figma, and the rows were mostly empty space.

Deliberately left out

• The logo-only header on /groups. Figma shows the full navbar, but feat: connect groups to backend #155 reduced it on purpose: the logo links to https://polinetwork.org and the footer is hidden too. /groups is meant to run standalone in front of the current site, where the beta navigation would lead to unfinished pages. That is a product/deploy decision, not an implementation slip, so I left it.
• Smaller school illustrations on phones. CardIcon builds responsive size classes at runtime ("md:" + token), so Tailwind never generates them: size={{ base: "sm", md: "md" }} silently loses the md size. That is a CardIcon bug worth its own fix. Until then the school tiles keep their single size.
• The four controls per row (WhatsApp, flag, Telegram, flag): the report flags are functional, and how they're presented is a design decision.

Housekeeping

The screenshots live on the pr-assets/groups-visual-refinement branch, so this PR's diff stays code-only. Delete the 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: 69de33f4-9a85-46c0-a794-a6447352e72c

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