01 Vibe Code Rescue · как выглядит результат

Дефект, которого
не видит автоскан

Это образец отчёта по услуге «Доделать за ИИ». Чтобы не показывать чужой код, аудит прогнан на собственном сайте — и нашёл в нём настоящую ошибку. Ниже она целиком: как обнаружена, чем доказана, что исправлено и как проверено, что фикс доехал до прода.

Рамки проверки

Объект: Публичный сайт-портфолио, React + Vite, статический хостинг
Дата: 29 июля 2026
Что проверялось: Мобильная вёрстка, вес и скорость загрузки, заголовки безопасности, ошибки в консоли
Найдено: 1 дефект средней важности, исправлен и проверен на проде
Время: Около часа от первого запроса до подтверждённого фикса

Находка

F-01 Блок контактов обрезается на узких экранах средняя

На экранах шириной до 380 px — а это распространённые Android-модели — блок контактов оказывался шире страницы: документ растягивался до 370 px при экране 360 px. Правая граница карточек и край заголовка секции уходили за пределы видимой области.

Почему это не поймали раньше

Дефект прятался за строкой body { overflow-x: hidden }. Она отключает горизонтальную прокрутку — страница не «едет» вбок, и внешне всё выглядит нормально. Лишние пиксели просто не показываются. Симптом не в том, что что-то съехало, а в том, что часть контента молча не отображается.

На iPhone (390 px и шире) воспроизвести невозможно — там всё помещается. Проверка «открыл на своём телефоне, всё хорошо» этот класс дефектов не ловит в принципе.

Что говорят автоматические проверки

Ничего. HTML и CSS валидны, ошибок в консоли ноль, ни один сетевой запрос не падает, Lighthouse доволен. Линтер и сканер тут молчат, потому что синтаксически код правильный — неверно только поведение на конкретной ширине экрана.

Блок контактов на экране 360 пикселей до исправления: правая граница карточек срезана краем экрана — **До.** Ширина документа 370 px при экране 360 px. Правая граница карточек срезана.

Тот же блок после исправления: подпись над значением, рамка карточек видна целиком — **После.** 360 px из 360 px. Подпись встала над значением, email и ссылки видны целиком.

Причина

Классическая ловушка флекс-раскладки: элементы внутри строки по умолчанию имеют min-width: auto и отказываются сжиматься меньше своего содержимого. Подпись слева была зафиксирована на 5.5rem, а длинный email справа не мог ужаться — в сумме строка перестала помещаться в контейнер.

Исправление

Пять строк CSS: на узких экранах строка переносится, подпись занимает отдельную строку над значением, значению разрешено сжиматься.

@media (max-width: 520px) {
  .row    { flex-wrap: wrap; row-gap: 0.35rem; }
  .rowLbl { min-width: 0; flex: 0 0 100%; }
  .rowVal { min-width: 0; overflow-wrap: anywhere; }
}

Проверка результата

Замер повторён на четырёх ширинах уже на живом сайте после деплоя, критерий — ширина документа не превышает ширину экрана и нет текста за его границей:

320 px → 320 / 320 · обрезанного текста: 0 · OK
360 px → 360 / 360 · обрезанного текста: 0 · OK
390 px → 390 / 390 · обрезанного текста: 0 · OK
414 px → 414 / 414 · обрезанного текста: 0 · OK

«Собралось без ошибок» — не доказательство. Доказательство — что дефект перестал воспроизводиться там, где он воспроизводился.

Проверено и чисто

В отчёт входит и то, что оказалось в порядке, — иначе непонятно, что вообще смотрели.

Вес страницы 180 КБ по сети на весь интерфейс. Раздувания нет ок

Ошибки в консоли Ноль на всех проверенных ширинах ок

Упавшие запросы Ноль ок

Мета viewport На месте и корректна ок

Заголовки безопасности Статический хостинг их не отдаёт — ограничение платформы. Для страницы без форм и личных данных риск низкий, отмечено как известное к сведению

Что входит в услугу

Границы заданы жёстко — иначе аудит превращается в бесконечное чтение чужого кода.

Один сайт или один репозиторий
Срок 2–3 дня
Отчёт в таком же виде: находки, отсортированные по влиянию на пользователя и деньги
По каждой находке — как воспроизвести, чем доказана, что делать
Мелкие фиксы — сразу, как этот; крупные переделки оцениваются отдельно

Работаю по коду и публичному адресу. Доступ к боевому серверу, базе и ключам не требуется и не запрашивается.

Честная оговорка: аудит не гарантирует отсутствия других дефектов. Он показывает то, что найдено в оговорённых рамках и за оговорённое время, — с доказательством, а не списком предупреждений линтера.

Прогнать ваш проект

Проект из Cursor, Lovable, Bolt или собранный с ИИ вручную — посмотрю тем же методом и покажу, что в нём происходит на самом деле.

Обсудить аудит →

Услуга «Vibe Code Rescue» на витрине: аудит + фиксы.