Affina Profilo e Squadra: logo home, tab Docs uguali, separatore classifica.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/crapp/BarraSottosezioni.tsx

@@ -21,8 +21,9 @@ const transizioneTab = { type: "tween" as const, duration: 0.16, ease: [0.25, 0.
  *
  * `variante="sottolineatura"`: pillola piena sulla tab attiva (Squadra e Classifica CSI);
  * su mobile la sola barra tab scorre in orizzontale senza allargare la pagina.
- * Default `pillole`: tab a larghezza naturale (Profilo). Il titolo ripetuto sotto la
- * barra non viene mai mostrato: l’etichetta è già nella tab.
+ * Default `pillole`: tab a larghezza uguale (basata sulla etichetta più lunga); se non
+ * entrano nella viewport la barra scorre in orizzontale (Profilo). Il titolo ripetuto sotto
+ * la barra non viene mai mostrato: l’etichetta è già nella tab.
  */
 export function BarraSottosezioni({
   voci,
@@ -33,7 +34,7 @@ export function BarraSottosezioni({
   voci: VoceSottosezione[];
   defaultId?: string;
   variante?: "pillole" | "sottolineatura";
-  /** Tab a larghezza uguale che riempiono la barra (es. Campionato). */
+  /** Tab a larghezza uguale che riempiono la barra (es. Campionato, Squadra). */
   riempiLarghezza?: boolean;
 }) {
   const [attiva, setAttiva] = useState(defaultId ?? voci[0]?.id ?? "");
@@ -89,9 +90,13 @@ export function BarraSottosezioni({
             role="tablist"
             aria-label="Sottosezioni"
             className={cn(
-              "flex flex-nowrap",
-              riempiLarghezza ? "w-full" : "w-max min-w-full",
-              sottolineatura ? "gap-1 px-2 py-1.5" : "snap-x snap-mandatory gap-1.5 px-5",
+              riempiLarghezza
+                ? "flex w-full flex-nowrap"
+                : sottolineatura
+                  ? "flex w-max min-w-full flex-nowrap"
+                  : // Pillole: colonne uguali alla voce più lunga; overflow → scroll sul wrapper.
+                    "grid w-max min-w-full grid-flow-col auto-cols-[1fr]",
+              sottolineatura ? "gap-1 px-2 py-1.5" : "gap-1.5 px-5",
             )}
           >
             {voci.map((v) => {
@@ -111,7 +116,11 @@ export function BarraSottosezioni({
                   }}
                   className={cn(
                     "min-h-11 touch-manipulation whitespace-nowrap text-sm font-bold uppercase tracking-wide transition-colors",
-                    riempiLarghezza ? "min-w-0 flex-1" : "shrink-0",
+                    riempiLarghezza
+                      ? "min-w-0 flex-1"
+                      : sottolineatura
+                        ? "shrink-0"
+                        : "w-full",
                     sottolineatura
                       ? cn(
                           "rounded-xl px-1 py-2.5 text-center",
@@ -120,7 +129,7 @@ export function BarraSottosezioni({
                             : "text-muted-foreground",
                         )
                       : cn(
-                          "snap-center rounded-full px-3.5 py-2",
+                          "rounded-full px-3.5 py-2 text-center",
                           selezionata
                             ? "bg-accent text-accent-foreground shadow-pop"
                             : "bg-secondary text-muted-foreground",

src/components/crapp/ui-bits.tsx

@@ -51,7 +51,7 @@ export function Card({
 /**
  * Accesso al profilo in alto a destra: la BottomNav ha quattro voci e questa è
  * l'unica porta verso `/profilo`. Sulla pagina del profilo si passa `azione` a
- * `PageHeader` per rimetterci il logo — sarebbe un link a sé stessa.
+ * `PageHeader` con il logo che porta alla home.
  *
  * Usa `useGiocatoreBase` (sola anagrafica) e non `useIo`: qui serve solo id e
  * iniziali, mentre `useIo` calcola l'intera rosa con statistiche (MVP, pagelle,

src/routes/profilo.tsx

@@ -130,11 +130,15 @@ function Profilo() {
 
   return (
     <>
-      {/* Qui il link al profilo sarebbe un link a sé stessa: torna il logo. */}
+      {/* Sul profilo il logo torna in home al posto del link al profilo. */}
       <PageHeader
         titolo={g.nome}
         sottotitolo={`#${g.numero} · ${g.ruolo}`}
-        azione={<TeamLogo src="/logo-nerorosso.svg" className="h-14 w-14" />}
+        azione={
+          <Link to="/" aria-label="Vai alla home" className="premi shrink-0 rounded-2xl">
+            <TeamLogo src="/logo-nerorosso.svg" className="h-14 w-14" />
+          </Link>
+        }
       />
 
       <Reveal className="-mt-6 px-5">
@@ -225,7 +229,7 @@ function Profilo() {
           },
           {
             id: "documenti",
-            label: "Documenti",
+            label: "Docs",
             contenuto: <ProfiloAmministrativo giocatoreId={g.id} conTendina={false} />,
           },
           {

src/routes/squadra.tsx

@@ -241,7 +241,7 @@ function Squadra() {
           <StatTile valore={team.muri} label="Muri squadra" />
         </div>
 
-        <div>
+        <div className="border-t border-border pt-4">
           <button
             type="button"
             onClick={() => setFiltroAperto(true)}
@@ -287,7 +287,7 @@ function Squadra() {
               <div key={g.id} className="rounded-2xl bg-card p-3 shadow-card">
                 <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
                   <div className="flex min-w-0 items-center gap-3">
-                    <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-secondary font-display text-base">
+                    <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-secondary font-display text-lg">
                       {i + 1}
                     </span>
                     <div className="min-w-0">