From 366928b61fb426803a1473b891ad9f8df1d48d10 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:22:49 +0200
Subject: [PATCH] Impedisce ai campi data di sfondare la card del tesseramento
 su iOS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In `grid-cols-2` l'elemento di griglia è la label di `Campo`, che ha
`min-width: auto` e quindi non scende sotto la larghezza del contenuto. Su iOS
`input[type="date"]` è un controllo nativo con una larghezza intrinseca che
`width: 100%` non riduce: le due date affiancate sfondavano la card e
l'`overflow-hidden` del pannello a tab tagliava via quello che usciva.

`min-w-0` sulla label e sulla classe condivisa degli input, più `min-width: 0`
e `appearance: none` sulle sole date — è `appearance` a rendere il controllo
davvero ridimensionabile, e restando sulle date il select tiene la sua freccia.

Il fix sta in `CampiProfilo`, quindi copre anche la dashboard amministratore.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/ProfiloAmministrativo.tsx | 11 +++++++++--
 src/styles.css                                 | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index 5dc1cb4..42f29bf 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -22,11 +22,18 @@ import {
 
 const TIPI_DOCUMENTO = ["Carta d'identità", "Patente", "Passaporto"];
 
-const classiInput = "w-full rounded-xl border border-border bg-background px-3 py-2 text-sm";
+const classiInput =
+  "w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
 
+/**
+ * `min-w-0`: dentro `grid-cols-2` questa label è l'elemento di griglia e ha
+ * `min-width: auto`, quindi si allarga fino al contenuto invece di stare nella
+ * colonna. Con un controllo nativo largo dentro (una data su iOS) la coppia
+ * sfonda la card.
+ */
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <label className="block">
+    <label className="block min-w-0">
       <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
diff --git a/src/styles.css b/src/styles.css
index ce096c6..9fec6e1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -527,6 +527,22 @@
   }
 }
 
+/*
+ * Su iOS `input[type="date"]` è un controllo nativo con una larghezza
+ * intrinseca (lo spazio di «gg/mm/aaaa») che `width: 100%` non riesce a far
+ * scendere: dentro `grid-cols-2` due date affiancate sfondano la card, e
+ * l'`overflow-hidden` del pannello a tab taglia via quello che esce.
+ * `appearance: none` è quello che rende il campo davvero ridimensionabile;
+ * bordo, sfondo e padding li mette già la classe condivisa.
+ */
+@layer base {
+  input[type="date"] {
+    min-width: 0;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+}
+
 /* Focus da tastiera sempre visibile: nessun controllo custom lo definiva. */
 @layer base {
   :focus-visible {