Дороблення та адаптація верстки 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 по блоках (таблиці, модалки, сітка/токени), фінальний прогін та чек за критеріями приймання.