From 5281c0c62b191345ac8f5135d0fda3f139f2e063 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Wed, 11 Nov 2026 10:45:43 +0100
Subject: [PATCH] =?UTF-8?q?Scout:=20nomi=20mai=20spezzati=20a=20met=C3=A0?=
 =?UTF-8?q?=20parola,=20riquadri=20a=203=20colonne=20sotto=20i=20400=20px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                    | 3 ++-
 src/components/crapp/ScoutReport.tsx | 2 +-
 src/routes/scout.tsx                 | 8 +++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 625e05c..268c264 100644
--- a/docs/CHANGELOG.md
+++ b/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
 
diff --git a/src/components/crapp/ScoutReport.tsx b/src/components/crapp/ScoutReport.tsx
index e0706fd..7511397 100644
--- a/src/components/crapp/ScoutReport.tsx
+++ b/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>
diff --git a/src/routes/scout.tsx b/src/routes/scout.tsx
index 5589128..25e0f95 100644
--- a/src/routes/scout.tsx
+++ b/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",