diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index 1984376..1eb3fbb 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/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",
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index 326fa85..f7da477 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/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,
diff --git a/src/routes/profilo.tsx b/src/routes/profilo.tsx
index a4b9616..d8e8eab 100644
--- a/src/routes/profilo.tsx
+++ b/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. */}
}
+ azione={
+
+
+
+ }
/>
@@ -225,7 +229,7 @@ function Profilo() {
},
{
id: "documenti",
- label: "Documenti",
+ label: "Docs",
contenuto: ,
},
{
diff --git a/src/routes/squadra.tsx b/src/routes/squadra.tsx
index c7c579e..8018776 100644
--- a/src/routes/squadra.tsx
+++ b/src/routes/squadra.tsx
@@ -241,7 +241,7 @@ function Squadra() {
-