From 77f587b53bf6969350233942c5fb90efee44ff8c Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sun, 6 Sep 2026 10:57:05 +0200
Subject: [PATCH] Uniforma l'altezza dei <select> agli altri campi dei form su
 Android.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Su Android il controllo nativo di <select> ignora parte del padding di
classiInput e risultava più alto o più basso degli input accanto.
appearance-none lo riporta a una scatola CSS normale; la freccia va
ridisegnata a mano perché appearance-none la fa sparire.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../crapp/ProfiloAmministrativo.tsx           |  7 +++---
 src/components/crapp/ui-bits.tsx              | 16 ++++++++++++++
 src/routes/admin.tsx                          | 22 ++++++++++---------
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 3e7dc99..db8205e 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
 import { Check, Eye, Loader2, Upload } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { Campo, classiInput, SezioneTendina } from "@/components/crapp/ui-bits";
+import { Campo, classiInput, Select, SezioneTendina } from "@/components/crapp/ui-bits";
 import { Reveal } from "@/components/motion/Reveal";
 import {
   caricaFile,
@@ -180,10 +180,9 @@ export function CampiProfilo({
       <Intestazione titolo="Documento di identità" completa={sezioni.documento} />
       <div className="grid grid-cols-2 gap-3">
         <Campo label="Tipo">
-          <select
+          <Select
             value={corrente.documentoTipo ?? ""}
             onChange={(e) => aggiorna({ documentoTipo: e.target.value })}
-            className={classiInput}
           >
             <option value="">—</option>
             {TIPI_DOCUMENTO.map((t) => (
@@ -191,7 +190,7 @@ export function CampiProfilo({
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </Campo>
         <Campo label="Numero">
           <input
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index 73add18..5c449b9 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -177,6 +177,22 @@ export function Campo({ label, children }: { label: string; children: ReactNode
   );
 }
 
+/**
+ * `<select>` nativo con la stessa altezza degli altri campi del form. Il
+ * controllo nativo di un `<select>` ignora parzialmente il padding di
+ * `classiInput` (soprattutto su Android), risultando più alto o più basso
+ * degli input accanto: `appearance-none` lo riporta a una scatola CSS
+ * normale, la freccia va poi ridisegnata a mano perché sparisce con lui.
+ */
+export function Select(props: ComponentPropsWithoutRef<"select">) {
+  return (
+    <span className="relative block">
+      <select {...props} className={cn(classiInput, "appearance-none pr-8", props.className)} />
+      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+    </span>
+  );
+}
+
 export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
   const meta = statoMeta[stato];
   return (
diff --git a/src/routes/admin.tsx b/src/routes/admin.tsx
index 03ed346..1fdb773 100644
--- a/src/routes/admin.tsx
+++ b/src/routes/admin.tsx
@@ -16,7 +16,14 @@ import {
 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { Campo, classiInput, PageHeader, Section, StatTile } from "@/components/crapp/ui-bits";
+import {
+  Campo,
+  classiInput,
+  PageHeader,
+  Section,
+  Select,
+  StatTile,
+} from "@/components/crapp/ui-bits";
 import { CampiProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import {
   nomeCompleto,
@@ -212,10 +219,9 @@ function ModificaGiocatore({ g, profilo }: { g: GiocatoreSquadra; profilo: Profi
           />
         </Campo>
         <Campo label="Ruolo">
-          <select
+          <Select
             value={squadraCorrente.ruolo}
             onChange={(e) => setDatiSquadra({ ...squadraCorrente, ruolo: e.target.value })}
-            className={classiInput}
           >
             <option value="">—</option>
             {RUOLI.map((r) => (
@@ -223,7 +229,7 @@ function ModificaGiocatore({ g, profilo }: { g: GiocatoreSquadra; profilo: Profi
                 {r}
               </option>
             ))}
-          </select>
+          </Select>
         </Campo>
       </div>
       <Campo label="Email (collegamento automatico al login, DD-018)">
@@ -536,18 +542,14 @@ function AggiungiGiocatore({ righe }: { righe: GiocatoreSquadra[] }) {
           />
         </Campo>
         <Campo label="Ruolo">
-          <select
-            value={dati.ruolo}
-            onChange={(e) => setDati({ ...dati, ruolo: e.target.value })}
-            className={classiInput}
-          >
+          <Select value={dati.ruolo} onChange={(e) => setDati({ ...dati, ruolo: e.target.value })}>
             <option value="">—</option>
             {RUOLI.map((r) => (
               <option key={r} value={r}>
                 {r}
               </option>
             ))}
-          </select>
+          </Select>
         </Campo>
       </div>
       <Campo label="Email (collegamento automatico al login, opzionale)">