Scout: nomi mai spezzati a metà parola, riquadri a 3 colonne sotto i 400 px

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

docs/CHANGELOG.md

@@ -28,7 +28,8 @@ Profilo. Nessuna migration.
 - Layout su schermi stretti (360-402 px, iPhone e Android): niente più pagina tagliata in
   larghezza. La tabella per giocatore dello scout sta nello schermo (il nome va a capo su due righe), le
   griglie di riquadri non sfondano con nomi ed etichette lunghe, la pagina non scorre in
-  orizzontale e i campi di testo sono a 16 px, così iOS non zooma al tocco.
+  orizzontale e i campi di testo sono a 16 px, così iOS non zooma al tocco. I nomi non si spezzano
+  mai a metà parola; nello scout live i riquadri dei giocatori sono a 3 colonne sotto i 400 px.
 
 ## [1.6.1] - 2026-11-06
 

src/components/crapp/ScoutReport.tsx

@@ -200,7 +200,7 @@ export function ScoutReport({
                 <tbody className="divide-y divide-border">
                   {righe.map(({ g, conteggi }) => (
                     <tr key={g.id}>
-                      <td className="px-2 py-2 font-semibold leading-tight">
+                      <td className="px-2 py-2 font-semibold leading-tight [overflow-wrap:normal]">
                         <span className="mr-1.5 tabular-nums text-muted-foreground">
                           #{g.numero}
                         </span>

src/routes/scout.tsx

@@ -384,7 +384,7 @@ function ScoutBoard({
             </Select>
           </div>
         </div>
-        <div className="grid grid-cols-4 gap-2">
+        <div className="grid grid-cols-3 gap-2 min-[400px]:grid-cols-4">
           {convocati.map((g) => {
             const attivo = selezionato === g.id;
             const piu = contaPiuSenzaRicezione(valutazioni, g.id, setCorrente);
@@ -394,12 +394,14 @@ function ScoutBoard({
                 type="button"
                 onClick={() => setSelezionato(attivo ? null : g.id)}
                 className={cn(
-                  "rounded-2xl p-2 text-center transition-all active:scale-95",
+                  "rounded-2xl p-1.5 text-center transition-all active:scale-95",
                   attivo ? "bg-accent text-accent-foreground shadow-pop" : "bg-card shadow-card",
                 )}
               >
                 <p className="font-display text-2xl leading-none">{g.numero}</p>
-                <p className="mt-1 text-[13px] font-bold leading-tight">{g.nome}</p>
+                <p className="mt-1 text-[13px] font-bold leading-tight [overflow-wrap:normal]">
+                  {g.nome}
+                </p>
                 <p
                   className={cn(
                     "text-[13px] tabular-nums",