Allinea la barra di navigazione fra iOS e Android

L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.

Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.

`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.

Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.

Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/crapp/BottomNav.tsx

@@ -15,9 +15,15 @@ export function BottomNav() {
       aria-label="Navigazione principale"
       // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
       // contenuto scorre, con una sfumatura al posto della riga netta.
-      className="materiale bordo-sfumato fixed inset-x-0 bottom-0 z-40"
+      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
     >
-      <div className="mx-auto grid max-w-md grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
+      {/*
+        Altezza fissa dal token, non dedotta dal contenuto: la striscia
+        toccabile misura uguale su iOS e Android, e sotto varia solo l'inset
+        di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
+        poteva saperla da fuori.
+      */}
+      <div className="mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 px-1">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
@@ -26,7 +32,7 @@ export function BottomNav() {
             activeProps={{ "aria-current": "page" }}
             // Lo stato attivo non è solo colore: cambia anche il peso del
             // testo e compare la barretta sopra l'icona.
-            className="group relative flex min-h-11 flex-col items-center gap-1 py-2.5 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
+            className="group relative flex h-full flex-col items-center justify-center gap-1 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
           >
             {({ isActive }) => (
               <>

src/components/crapp/CelebrazioneBadge.tsx

@@ -32,7 +32,7 @@ export function CelebrazioneBadge() {
   if (!notifica) return null;
 
   return (
-    <div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">
+    <div className="anim-reveal spazio-nav fixed inset-0 z-50 grid place-items-end bg-foreground/40 px-4 pt-4 backdrop-blur-sm">
       <div
         className={cn(
           "anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",

src/routes/__root.tsx

@@ -22,7 +22,7 @@ import { useSessione } from "../lib/auth";
 
 function NotFoundComponent() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-dvh items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="font-display-lg text-7xl text-foreground">404</h1>
         <h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
@@ -50,7 +50,7 @@ function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
   }, [error]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex min-h-dvh items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
         <h1 className="text-xl font-semibold tracking-tight text-foreground">
           Questa pagina non si è caricata
@@ -187,7 +187,7 @@ function AppShell() {
 
   if (!mounted || !pronta) {
     return (
-      <div className="grid min-h-screen place-items-center bg-background">
+      <div className="grid min-h-dvh place-items-center bg-background">
         <TeamLogo className="h-16 w-16 animate-pulse" />
       </div>
     );
@@ -195,7 +195,7 @@ function AppShell() {
 
   return (
     <>
-      <div className="mx-auto min-h-screen max-w-md bg-background pb-24">
+      <div className="spazio-nav mx-auto min-h-dvh max-w-md bg-background">
         {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
         <Outlet />
       </div>

src/routes/benvenuto.tsx

@@ -92,7 +92,7 @@ function Benvenuto() {
   const inAttesaCollegamento = !!utenteId && !mioSlot && !erroreCollegamento;
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center px-6 py-12">
+    <div className="flex min-h-dvh flex-col items-center justify-center px-6 py-12">
       <TeamLogo className="h-20 w-20" />
       <h1 className="mt-6 text-center font-display text-4xl uppercase leading-none">
         Benvenuto in CrAPP

src/styles.css

@@ -62,6 +62,19 @@
 :root {
   color-scheme: light;
   --radius: 1rem;
+  /*
+   * Geometria della barra di navigazione, unica sorgente di verità: prima
+   * l'altezza era ricopiata a occhio come `pb-24` nel contenuto e `pb-28`
+   * nella celebrazione badge, e su iPhone i conti tornavano per 2 px.
+   *
+   * `--pad-sicura-fondo` è il motivo per cui la barra su iPhone e su Android
+   * non può essere alta uguale: `env(safe-area-inset-bottom)` vale ~34 px
+   * sopra la home indicator e 0 su Android, dove la barra di sistema sta
+   * fuori dal viewport. Il `max()` dà comunque ad Android un respiro minimo,
+   * così la differenza è un margine in più, non un allineamento diverso.
+   */
+  --altezza-nav: 3.75rem;
+  --pad-sicura-fondo: max(env(safe-area-inset-bottom), 0.5rem);
   --background: oklch(0.985 0.002 240);
   --foreground: oklch(0.16 0.01 260);
   --card: oklch(1 0 0);
@@ -351,6 +364,27 @@
   -webkit-backdrop-filter: blur(20px) saturate(180%);
 }
 
+/*
+ * Chrome su Android disattiva `backdrop-filter` quando l'accelerazione
+ * hardware non è disponibile: senza questo, su quei device la barra resta
+ * solo semitrasparente e il contenuto si legge attraverso.
+ */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .materiale {
+    background-color: var(--color-card);
+  }
+}
+
+/** Padding inferiore della chrome flottante. */
+@utility pad-sicura-fondo {
+  padding-bottom: var(--pad-sicura-fondo);
+}
+
+/** Spazio che il contenuto deve lasciare sotto di sé per non finire dietro la barra. */
+@utility spazio-nav {
+  padding-bottom: calc(var(--altezza-nav) + var(--pad-sicura-fondo) + 1rem);
+}
+
 @utility bordo-sfumato {
   &::before {
     content: "";