/* mobile-fixes.css * Copertura larga responsive per le 60+ view del gestionale Naman. * Caricato globalmente da sidebar.js dopo theme-n8n.css. * Tutti i fix sono sotto @media (max-width: 640px) → zero impatto desktop. * * Audit responsive 2026-05-16: 87 view scansionate, 5 pattern sistemici risolti qui. * Le pagine più complesse (admin-fatture-analytics, controllo-gestione, locazioni-grid, * pec, file-manager) necessitano ancora fix mirato pagina per pagina — vedi backlog UX-MOBILE-*. */ @media (max-width: 640px) { /* ── 1. Neutralizza max-width desktop-only ─────────────────────────────── * Pattern: 28 view usano max-w-7xl/screen-* senza fallback responsive * Effetto: container espandeva oltre 1280px anche su mobile + padding fisso → contenuto strozzato */ [class*="max-w-7xl"], [class*="max-w-6xl"], [class*="max-w-screen-"] { max-width: 100% !important; } /* ── 2. Tabelle responsive di default ──────────────────────────────────── * Pattern: 32/52 view con tabelle hanno min-w-[600px+] hardcoded * Strategia conservativa: NON tocco il min-width (alcune tabelle a 15+ col * lo usano legittimamente con wrapper overflow-x-auto), ma riduco font/padding * per guadagnare spazio orizzontale e dare leggibilità migliore. * Per comprimere il min-width esplicitamente: classe .compress-on-mobile. */ table { font-size: 12px; } th, td { padding: 6px 4px !important; } table.compress-on-mobile, .compress-on-mobile table { min-width: 0 !important; } /* ── 3. Modal / drawer / sidebar fissi → fluidi ────────────────────────── * Pattern: 15 view con elementi w-96, w-80, w-72, w-64, w-52, w-48 fissi * Effetto: su 375px schermo, una sidebar w-80 (320px) occupa l'85% del viewport * Soluzione: cap a 100vw - 1rem (margine respiro), preservando overflow interno. */ [class*="w-96"], [class*="w-80"], [class*="w-72"], [class*="w-64"], [class*="w-52"], [class*="w-48"] { max-width: calc(100vw - 1rem) !important; } /* ── 4. Target touch decenti su bottoni icona ──────────────────────────── * Pattern: 25 view con bottoni p-1 (target ~20-24px, sotto soglia 32px raccomandata) * Soluzione: aumento padding solo su button/anchor che contengono solo svg/icona. */ button.p-1 > svg:only-child, a.p-1 > svg:only-child, button.p-1\.5 > svg:only-child, a.p-1\.5 > svg:only-child { min-width: 18px; min-height: 18px; } /* ── 5. Long text non sfora i container ────────────────────────────────── * Word-wrap aggressivo per testi lunghi (URL, codici fiscali, descrizioni) * Solo dentro celle/paragraph: niente effetti collaterali su layout strutturali. */ td, th, p, li, dd, dt { overflow-wrap: anywhere; } /* ── 6. Padding orizzontale ridotto sui main container ─────────────────── * Pattern: classi px-6/px-8 sui main → su 375px viewport sprecano 48-64px utili */ main.px-6, main.px-8, .main-container.px-6, .main-container.px-8 { padding-left: 12px !important; padding-right: 12px !important; } } /* ── Compensazione visibile anche oltre 640px per tabelle con scroll ────── * Se un'area dichiara explicitamente .table-scroll, il wrapper è scrollabile orizzontalmente * anche su tablet (utile per CdG / fatture analytics dove la tabella ha 12+ colonne). */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { display: table; } /* ── 7. Campi a 16px: impedisce lo zoom automatico di iOS ────────────────── Safari su iOS ingrandisce la pagina quando si tocca un campo con font sotto i 16px, e NON torna indietro da solo: l'utente resta con la vista zoomata e deve rimpicciolire a mano. Nel progetto ci sono 196 input con text-xs/text-sm su 29 pagine, quindi conviene una regola unica invece di correggere le classi una per una. `font-size` è l'unica proprietà che conta: dimensioni e padding restano quelli di Tailwind, quindi l'aspetto cambia il minimo indispensabile. */ @media (max-width: 640px) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } } /* ── 8. Griglie a molte colonne: impraticabili sotto i 640px ─────────────── Le classi Tailwind senza prefisso (`grid-cols-7`) valgono anche a 360px: un calendario a 7 colonne dà celle da ~51px, illeggibili. Qui si riducono solo le griglie DAVVERO troppo fitte, lasciando stare 2 e 3 colonne che su mobile restano usabili. ECCEZIONE: i calendari veri devono restare a 7 colonne (una per giorno della settimana), altrimenti la griglia perde significato — per quelli si riduce il testo invece del numero di colonne. */ @media (max-width: 640px) { .grid-cols-5:not(.cal-grid), .grid-cols-6:not(.cal-grid), .grid-cols-8:not(.cal-grid), .grid-cols-10:not(.cal-grid), .grid-cols-12:not(.cal-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid-cols-4:not(.cal-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Calendari: restano 7 colonne ma con testo e spaziatura ridotti */ .grid-cols-7 { font-size: 11px; } .grid-cols-7 > * { padding-left: 2px !important; padding-right: 2px !important; min-width: 0; } } /* ── 9. Importi grandi dentro card strette ───────────────────────────────── Schema ricorrente: KPI in `grid-cols-2` (2 colonne anche a 360px) con il valore in `text-2xl`/`text-xl` grassetto. Su un telefono da 360px la card offre ~124px utili, ma un importo come "60.894.432,74 €" a 20px grassetto ne chiede ~155: il numero sfonda o va a capo a metà. Riguarda almeno 5 pagine con valuta (banche, bilancio-verifica, aste, as400-partitario, agenzia-riscossione); su liquidita.html il layout è stato invece corretto alla radice, portando le card a una colonna. Qui si riduce solo la dimensione del testo: nessun layout cambia, e sotto i 400px — dove il problema si manifesta — il numero rientra. `tabular-nums` è mantenuto dove presente, quindi le cifre restano allineate. */ @media (max-width: 400px) { .text-2xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xl { font-size: 1.075rem; line-height: 1.5rem; } } /* ── 10. Header e barre azioni: andare a capo invece di sovrapporsi ───────── Schema presente in 61 view su 89: `
` SENZA `flex-wrap`. Su desktop sta comodo, su un telefono da 375px no — e non è nemmeno tutto quello che c'è nel markup, perché `sidebar.js` inietta nell'header altri tre elementi (hamburger, pallino di stato, stampa PDF). Su «Finanziamenti Soci» si arriva a 8 elementi in fila. Senza `flex-wrap` un contenitore flex non manda a capo: comprime i figli oltre la loro larghezza minima finché testi e icone finiscono uno sopra l'altro. Non è un difetto di quella pagina, è lo schema che si ripete. Qui si sblocca l'andata a capo e si passa a `flex-start`: con `justify-between` una riga con un solo elemento residuo lo spingerebbe a destra, staccato dal resto, dando l'impressione di un allineamento sbagliato. */ @media (max-width: 640px) { header, .flex.items-center.justify-between { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 6px; } /* Anche i gruppi interni all'header devono poter andare a capo: spesso i bottoni azione stanno in un
annidato, che senza questo resterebbe una riga unica incomprimibile. */ header > div { flex-wrap: wrap; row-gap: 6px; } /* `min-width: 0` è ciò che permette a `truncate` di funzionare davvero: un figlio flex ha min-width:auto per default e si rifiuta di rimpicciolirsi sotto il proprio contenuto, che è la causa materiale dello sbordamento. */ header > *, header > div > * { min-width: 0; } /* L'header è sticky: andando a capo cresce in altezza e mangia schermo. Con padding e testo ridotti due righe costano quanto prima una e mezza. */ header { padding-top: 8px !important; padding-bottom: 8px !important; } /* Etichette lunghe nei bottoni azione ("Nuovo finanziamento"): il bottone resta intero e va a capo come blocco, senza spezzare la scritta a metà. */ header button, header a { white-space: nowrap; } /* ⚠️ Senza questo il resto non serve a niente. `theme-n8n.css` dichiara `.nm-topbar-right { flex-shrink: 0 }`: il gruppo dei bottoni si rifiuta di rimpicciolirsi, resta largo quanto il suo contenuto (462px misurati su «Finanziamenti Soci») e sfora lo schermo — e non va a capo, perché non è mai costretto a farlo. Va riabilitata la contrazione, non solo il wrap. Queste classi le mette sidebar.js a runtime: non si vedono nel markup delle view, e cercare il difetto solo nell'HTML della pagina non lo trova. */ header > .nm-topbar-right, header > .nm-topbar-left, .nm-topbar > .nm-topbar-right, .nm-topbar > .nm-topbar-left { flex-shrink: 1 !important; flex-wrap: wrap !important; min-width: 0 !important; row-gap: 6px; } /* Il gruppo interno di bottoni (`
`) è un nipote dell'header: non lo prendono né `header > div` né la regola sopra, e restando su riga unica costringe il genitore a non rimpicciolirsi. */ header .nm-topbar-right > div, header .nm-topbar-left > div { flex-wrap: wrap !important; min-width: 0 !important; row-gap: 6px; } /* Andare a capo da solo non basta: con i bottoni a dimensione desktop l'header di «Finanziamenti Soci» passava da 51px a 209px, cioè un quarto di uno schermo da 800px — e resta sticky, quindi quello spazio è perso per sempre. Rimpicciolendo bottoni e icone ne entrano 2-3 per riga invece di uno, e l'altezza torna accettabile senza togliere nessun comando. */ header .nm-btn, header > * button, header > * a, header button, header a { font-size: 11px !important; padding: 3px 6px !important; gap: 3px !important; } header svg { width: 14px !important; height: 14px !important; } header, .nm-topbar { column-gap: 4px !important; } /* ⚠️ Rimpicciolire i bottoni da solo NON riduce le righe: il limite è l'annidamento. `sidebar.js` raggruppa i comandi in `.nm-topbar-left` e `.nm-topbar-right` (con dentro un altro div), e ogni contenitore flex annidato occupa una riga propria — restavano 3-4 righe con metà della seconda vuota. `display: contents` scioglie i wrapper: i comandi diventano figli diretti dell'header e si impacchettano insieme, riempiendo le righe. Sono contenitori di solo layout (niente sfondo, bordo o padding proprio), quindi togliere la loro scatola non cambia l'aspetto. */ header > .nm-topbar-left, header > .nm-topbar-right, header > .nm-topbar-right > div { display: contents !important; } /* Con 8 comandi in 375px l'header resta comunque su più righe (~169px). Da sticky occuperebbe stabilmente un quinto dello schermo; da statico quello spazio si recupera appena si scorre, e i comandi restano tutti raggiungibili tornando in cima. Il menu resta comunque sempre a portata: l'hamburger e il pallino di stato sono duplicati nella barra laterale. */ header.sticky, .nm-topbar { position: static !important; } /* ⚠️ Il `display: contents` qui sopra NON ha mai avuto effetto: tre file si contendono il `display` dei figli dell'header e vince il più specifico. theme-n8n.css body > header > div:first-child (0,1,3) ← vince mobile-fixes header > .nm-topbar-left (0,1,1) sidebar.js body > header > div (0,0,3) (CSS inline) Verificato enumerando le regole che matchano davvero l'elemento: i wrapper restano `display: flex`. Invece di aggiungere un quarto contendente sul `display` — che diventerebbe una gara a chi scrive il selettore più lungo — si agisce sul `flex-basis`, che nessuno dichiara. Il difetto concreto: con `flex-wrap: wrap` l'algoritmo flex decide dove spezzare guardando la dimensione IDEALE degli elementi, non quella compressa. `.nm-topbar-left` chiede ~280px per titolo e icone, quindi il gruppo di destra (Stampa + Esci) non ci sta e va a capo: header di 93px su due righe invece di 52px su una. Con `flex-basis: 0` la sinistra non pesa più nella scelta del punto di rottura: destra resta sulla prima riga, poi la sinistra si allarga nello spazio avanzato e il titolo va in ellissi. Il wrap resta abilitato, quindi le pagine con molti comandi (Finanziamenti Soci ne ha 8) continuano a mandare a capo il gruppo di destra come prima: nessuna regressione. Nota sulla specificità: i selettori qui sotto sono `header.nm-topbar > …` (0,2,1) perché poco più su, nello STESSO file, c'è già `.nm-topbar > .nm-topbar-left` (0,2,0) con `flex-wrap: wrap !important`. Scritto come `header > .nm-topbar-left` (0,1,1) questo blocco perdeva e la sinistra continuava ad andare a capo al proprio interno. */ header.nm-topbar > .nm-topbar-left, body > header > .nm-topbar-left { flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 0 !important; min-width: 0 !important; flex-wrap: nowrap !important; } /* La destra NON va bloccata a `nowrap`/`shrink: 0`: su «Finanziamenti Soci» sono 8 comandi larghi ~460px e senza contrazione né andata a capo uscivano dallo schermo (verificato: sforamento orizzontale a 360px). Le serve la dimensione naturale come base — così quando è piccola, come qui su Canoni (76px: Stampa + Esci), resta accanto al titolo sulla stessa riga — ma anche la libertà di comprimersi e impilarsi quando i comandi sono tanti. */ header.nm-topbar > .nm-topbar-right, body > header > .nm-topbar-right { flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; flex-wrap: wrap !important; } /* Il titolo deve poter rimpicciolire: senza `min-width: 0` un figlio flex si rifiuta di scendere sotto il proprio contenuto e l'ellissi non scatta mai. */ header .nm-topbar-title { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ── 11. Griglie di card a 2 colonne troppo strette sotto i 380px ─────────── `min-[420px]:grid-cols-2` e simili sono già gestite dagli autori, ma restano le `grid-cols-2` secche: a 360px danno colonne da ~166px, che con un importo in grassetto e un'etichetta vanno in sofferenza. Sotto i 380px si passa a colonna singola: meglio scorrere che leggere numeri troncati. */ @media (max-width: 380px) { .grid-cols-2:not(.cal-grid):not(.keep-2-cols) { grid-template-columns: 1fr !important; } } /* ── 12. Nomi lunghi troncati fino a diventare indistinguibili ────────────── Su /canoni le card mostrano il nome del contratto con `truncate`, che a 390px taglia a ~18 caratteri: «EGUD - FLAMINIA ...» e «EGUD - VIA FLAMI...» sono due contratti diversi che sullo schermo diventano identici, e la card perde la sua unica informazione identificante. Su mobile si concede una seconda riga: `line-clamp` mantiene i puntini di sospensione se serve, ma dopo due righe, non dopo una. Il guadagno è ~36 caratteri, sufficiente a distinguerli. Limitato ai contenitori di lista/card: gli header e le barre restano a una riga (li gestisce il blocco 10), altrimenti si allungherebbero di nuovo. */ @media (max-width: 640px) { .card-lista .truncate, [id^="table-"] .truncate, #societa-container .truncate, #matrix-container tbody .truncate { overflow: hidden; text-overflow: ellipsis; white-space: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* ⚠️ Regressione introdotta dal blocco 10: per consentire il wrap sostituisce `justify-between` con `flex-start`, e così toglie anche lo spazio che teneva separati gli elementi. Dove i due testi ci stanno per un soffio non vanno a capo e finiscono appiccicati: «Incassi — sei il proprietarioCanoni che devi ricevere». Serve una spaziatura esplicita, che vale per tutte le barre con quello schema, non solo per questa pagina. */ header, .flex.items-center.justify-between { gap: 0.5rem; } } /* ── 13. Bottoni di filtro che sbordano ──────────────────────────────────── Su /promemoria un `.filter-btn` esce di 26px dal viewport: la fila di filtri non va a capo. Come per gli header (blocco 10), il rimedio è consentire il wrap invece di lasciare che l'ultimo elemento esca dallo schermo. */ @media (max-width: 640px) { .filter-btn { flex-shrink: 1; min-width: 0; } .filter-btn:last-child { margin-right: 0; } } /* ── 14. Barre di schede che escono dallo schermo ────────────────────────── Misurato su /aste: le schede arrivano a 400 e 536px in un viewport da 390, e il contenitore (`flex border-b`) NON ha overflow-x, a differenza di /liquidita e /vendite-retail che ce l'hanno. Risultato: quelle schede sono irraggiungibili — non si vedono e non si può scorrere per raggiungerle. Si rende scorrevole qualunque fila di schede, indipendentemente da come l'ha scritta l'autore della pagina. */ @media (max-width: 640px) { .flex:has(> .tab-btn), .flex:has(> .tab-active), .flex:has(> .tab-inactive) { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: thin; } .tab-btn, .tab-active, .tab-inactive { flex-shrink: 0; } } /* ── 15. Header sovraccarichi: la freccia indietro finisce sul titolo ─────── Su /liquidita l'header porta hamburger, pallino di stato, freccia indietro, titolo, campo data e pulsante Aggiorna in 390px. Il blocco 10 manda a capo, ma la freccia e il testo che la segue restano nello stesso gruppo annidato e si accavallano: si legge «‹Saldi al 20/08/2026» con la freccia SOPRA la S. Le icone di navigazione non devono comprimersi, il testo sì. */ @media (max-width: 640px) { header a[href] > svg, header a[title] > svg { flex-shrink: 0; } header a:has(> svg) { flex-shrink: 0; margin-right: 0.25rem; } /* il testo accanto può accorciarsi invece di finire sotto l'icona */ header span, header h1, header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* ── 16. Striscia mensile di /canoni: quadratini da 16px e anonimi ────────── Nella lista contratti ogni mese è un `w-4 h-4`, cioè 16×16px: metà del minimo tattile (32px) e un terzo di quello raccomandato da Apple (44px). Su /canoni erano 270 bersagli su 319 sotto soglia, la peggiore di tutte le pagine — ed è quella usata ogni giorno. Peggio: sono caselle mute. Il mese si legge solo dal `title`, che su touch non compare mai, quindi per sapere dove si sta toccando bisogna contare le caselle da sinistra. Su mobile la striscia occupa tutta la larghezza disponibile: 12 celle che si dividono ~340px danno ~26px l'una, e con 30px di altezza il bersaglio passa da 256px² a ~780px². Dentro ogni cella compare l'iniziale del mese. Su desktop non cambia niente: la sigla resta nascosta e il quadratino 16px. */ .mese-sigla { display: none; } @media (max-width: 640px) { /* La striscia sta in una colonna da 138px: lì dentro 12 celle non potranno mai essere adeguate, qualunque regola si scriva. Le si dà una riga tutta sua allargando la colonna che la contiene a tutta la card — importo e stato vanno a capo, il che su un telefono si legge anche meglio. */ .striscia-mesi { width: 100%; gap: 2px; } .divide-y > .flex.flex-wrap > .flex-1.min-w-0:has(.striscia-mesi) { flex-basis: 100%; width: 100%; } .striscia-mesi .mese-cella { flex: 1 1 0; width: auto !important; height: 30px !important; min-width: 0; border-radius: 4px; } .mese-sigla { display: block; font-size: 10px; font-weight: 600; line-height: 1; opacity: 0.55; } /* il mese selezionato deve restare riconoscibile anche con le celle grandi */ .striscia-mesi .mese-cella.ring-1 { outline: 2px solid #6b7280; outline-offset: -2px; } }