Доработка и адаптация верстки B2B-кабинета: устранение CLS/LCP, приведение к дизайн-системе и кроссбраузерная адаптивность

Исходная ситуация: есть B2B-личный кабинет для клиентов логистической компании (заказы, статусы, документы, платежи). Верстка уже внедрена в проект, но собрана фрагментарно и ведет себя нестабильно на разных брейкпоинтах. На части страниц наблюдаются скачки макета при подгрузке данных, «плывут» таблицы, ломаются модальные окна и фиксированный хедер, а на iOS Safari встречаются горизонтальные скроллы. В Figma есть актуальная дизайн-система и макеты ключевых экранов, но текущая реализация ей не соответствует.

Техническая среда: Next.js 14 (App Router), TypeScript, CSS Modules + PostCSS, частично Tailwind утилиты, компоненты на React, сборка через Vercel. UI использует простую локальную библиотеку компонентов (Button, Input, Modal, Tabs), но стили местами заданы прямо в компонентах. Данные приходят асинхронно, есть скелетоны, виртуализация строк в таблице на одной из страниц. Репозиторий в GitHub, задачи принимаются через PR.

Что нужно сделать: привести существующую верстку к стабильной адаптивности и дизайн-системе без переписывания логики и без смены технологического стека.
- Провести аудит 6-8 ключевых страниц: Дашборд, Список заказов, Карточка заказа, Документы, Платежи, Профиль.
- Исправить адаптивность для брейкпоинтов 360/768/1024/1440 без изменения структуры данных и API.
- Устранить источники CLS и мерцаний при подгрузке: зарезервировать размеры для графиков/таблиц/карточек, поправить скелетоны, стабилизировать высоту хедера и тулбаров.
- Нормализовать сетку и отступы под дизайн-токены из Figma: привести типографику, интервалы, радиусы, тени к заданным значениям, убрать дублирующиеся «магические» значения.
- Доработать таблицы: фиксированная шапка, предсказуемые колонки, переносы и обрезка, корректная работа горизонтального скролла только внутри таблицы на узких экранах, сохранение доступности.
- Исправить модальные окна и дропдауны: корректное позиционирование, запрет скролла подложки, фокус-трап, работа на iOS Safari без прыжков при появлении клавиатуры.
- Привести стили к единому подходу: вынести инлайновые стили в CSS Modules там, где это влияет на поддержку, удалить конфликтующие Tailwind-классы на проблемных компонентах, не ломая остальную верстку.

Ограничения: нельзя менять бизнес-логику, роутинг, API-контракты и библиотеку компонентов радикально. Нельзя подключать тяжелые UI-фреймворки. Допускается точечное добавление небольших утилит для измерения/фиксирования размеров и улучшения доступности, если это обосновано. Важно сохранить SSR/CSR поведение Next.js и не ухудшить время сборки.

Результат: PR с правками верстки и стилей, плюс короткий markdown-отчет по найденным проблемам и принятым решениям, чтобы команда могла поддерживать дальше.

Измеримые критерии приемки:
1) На указанных страницах нет горизонтального скролла у body при ширине 360/768/1024/1440 в Chrome/Firefox/Edge и Safari (macOS + iOS).
2) CLS на Дашборде и Списке заказов снижен и не превышает 0.1 при замерах Lighthouse в production mode, LCP не ухудшен относительно текущего значения более чем на 10%.
3) Таблицы не ломают сетку, колонки читаемы, шапка фиксируется, а горизонтальный скролл появляется только внутри контейнера таблицы.
4) Модальные окна: фокус не уходит за пределы, Esc закрывает, скролл страницы под модалкой заблокирован, на iOS нет дерганья контента при открытии/закрытии.
5) Стили соответствуют токенам из Figma по основным параметрам (шрифты, размеры, отступы, радиусы) и нет дублирования критичных правил в 2-3 местах для одного компонента.

Этапы работы ожидаются такие: быстрый аудит и план правок, затем итеративные PR по блокам (таблицы, модалки, сетка/токены), финальный прогон и чек по критериям приемки.