[viganogabriele]

Stacked on #210 (feat/associations-visual-refinement) → … → #199. Draft.

/faqs follows Figma (2334:5376 desktop, 2611:5646 mobile) closely in structure. The problems were in the states the frames don't show and in the spacing around the list.

What changes

An empty first tab no longer blanks the page

• Live data opens on "Generale", which has no questions, so visitors land on an empty band between the tabs and the callout (the same happens on beta today).
• The page now opens on the first category that has answers.
• Empty categories show the dashed empty state already used on /projects and /associations: "Non ci sono ancora domande in questa categoria."
• Which categories exist, and whether empty ones should be shown at all, stays a content decision. The categories are untouched.

Layout and rhythm

• The page uses the shared CONTAINER and PAGE_HERO/PAGE_MAIN from layout/page.ts, replacing the old px-4 py-49 with justify-center.
• The tabs follow the hero closely: 64 px on phones, 96 px from md. They are the hero's content, not a new section, so they don't get the post-hero break. Figma leaves about 100 px.
• The list column is 900 px, as in Figma; it was 1020.
• The "Non trovi ciò che stai cercando?" callout sits 64/96 px under the list instead of 272/316 px, so it reads as the list's follow-up.

Phones

• The tab strip bleeds to both screen edges, as in the Figma mobile frame. Before, it stopped 8 px short of a 16 px gutter.
• The callout title is 14 px instead of 11 px (label-small), which was too small to read.

Answers

• Answers are plain text from the backend. They now keep the line breaks the editors typed (whitespace-pre-line).
• They stop at about 70 characters per line. Before, a 1440 px window gave about 125 characters per line.

Shared changes and their reach

Change	Also used by	Effect there
AccordionContent: max-w-[70ch], text-pretty	/matricole FAQ, /guides	Long answers wrap at a readable measure
AccordionTrigger: hover tint on the header only, inset 2 px blue-secondary focus ring	same	It is the only clickable part; it had no hover and no visible focus
AccordionItem: overflow-hidden so the header tint follows the rounded corners	same	none at rest
TabsTrigger: white tint on hover for inactive tabs, inset focus ring (resolves the TODO in the file)	/storia (boards, thanks)	keyboard and hover only
CalloutItem title 14 px on phones	only /faqs	—

/storia and /guides/generali, before and after at 390 and 1440 px, have identical page heights.

Screenshots

The backend isn't reachable locally, so before and after use the same temporary, uncommitted fixture:

• the real beta data: "Generale" and "Test2" empty, "Matricole" with 5 questions;
• one extra "Lezioni" category with longer questions and a two-paragraph answer, to stress wrapping.

1440, default tab (before: the empty "Generale")

1440 and 1024, "Lezioni" tab

390

Empty category and tab hover; accordion header hover and keyboard focus

Verification

• pnpm check: clean.
• pnpm build: passes.
• pnpm typecheck: clean.
• node --test tests/*.test.mjs: 3/3 pass.
• I checked /faqs in the browser at 320, 390, 768, 1024, 1279, 1280, 1440, 1728 and 1920 px; there is no horizontal overflow at any width.

Trade-offs

• On phones the strip scrolls the active tab into view, so the first tab can be partly hidden when a later one is active. This is the existing behaviour, and the edge fade signals that the strip scrolls.
• The 70ch measure also applies to /guides accordions, which currently show placeholder content.

Deliberately left out

• Categories: the backend has "Generale" and "Test2" with no questions, while Figma has Lezioni, Tasse, Esami, Piano di studi and Mobilità. That is content for the association to fill.
• Large icon category selector: Figma's FaqSelector_Desktop (2962:9615) is an unimplemented design exploration.
• Search inside FAQs: a product decision.
• Rich text (links, lists) in answers: the backend returns plain text.

Housekeeping

Screenshots live on pr-assets/faqs-visual-refinement, so this diff stays code-only. That branch can be deleted 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: b28f3cf3-7980-4e95-879e-ff2e21af2bc8

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