Refinement and adaptation of the B2B-office layout: eliminating CLS/LCP, bringing it to a design system and cross-browser adaptability

Initial situation: there is a B2B personal account for clients of a logistics company (orders, statuses, documents, payments). The layout has already been implemented into the project, but it is assembled in fragments and behaves unstable at different breakpoints. On some pages, there are layout jumps when loading data, tables “float”, modal windows and a fixed header break, and on iOS Safari there are horizontal scrolls. Figma has an up-to-date design system and key screen layouts, but the current implementation doesn't match it.

Technical environment: Next.js 14 (App Router), TypeScript, CSS Modules + PostCSS, partially Tailwind utilities, React components, assembly via Vercel. The UI uses a simple local library of components (Button, Input, Modal, Tabs), but in some places the styles are set directly in the components. Data arrives asynchronously, there are skeletons, virtualization of rows in a table on one of the pages. Repository on GitHub, tasks are accepted via PR.

What needs to be done: bring the existing layout to a stable adaptability and design system without rewriting the logic and without changing the technology stack.
- Conduct an audit of 6-8 key pages: Dashboard, List of orders, Order card, Documents, Payments, Profile.
- Fix adaptability for breakpoints 360/768/1024/1440 without changing the data structure and API.
- Eliminate sources of CLS and flickering during loading: reserve sizes for graphs/tables/cards, fix skeletons, stabilize the height of the header and toolbars.
- Normalize the grid and margins for design tokens from Figma: bring typography, spacing, radii, shadows to the specified values, remove duplicate “magic” values.
- Improve tables: fixed header, predictable columns, hyphenation and trimming, correct horizontal scrolling only within the table on narrow screens, maintaining accessibility.
- Fix modal windows and dropdowns: correct positioning, prohibition of background scrolling, focus trap, work on iOS Safari without jumping when the keyboard appears.
- Bring styles to a unified approach: move inline styles to CSS Modules where it affects support, remove conflicting Tailwind classes on problematic components without breaking the rest of the layout.

Limitations: you cannot radically change business logic, routing, API contracts and the component library. You cannot connect heavy UI frameworks. It is allowed to add small utilities to measure/fix dimensions and improve accessibility, if justified. It is important to preserve the SSR/CSR behavior of Next.js and not degrade build times.

Result: PR with layout and style changes, plus a short markdown report on the problems found and solutions taken, so that the team can support further.

Measurable acceptance criteria:
1) On these pages there is no horizontal scroll at the body with a width of 360/768/1024/1440 in Chrome/Firefox/Edge and Safari (macOS + iOS).
2) CLS on the Dashboard and Order List is reduced and does not exceed 0.1 when measuring Lighthouse in production mode, LCP is not deteriorated relative to the current value by more than 10%.
3) Tables do not break the grid, the columns are readable, the header is fixed, and horizontal scrolling appears only inside the table container.
4) Modal windows: focus does not go beyond the limits, Esc closes, page scrolling under the modal is blocked, on iOS there is no jerking of content when opening/closing.
5) The styles correspond to tokens from Figma in terms of basic parameters (fonts, sizes, indents, radii) and there is no duplication of critical rules in 2-3 places for one component.

The expected stages of work are: quick audit and edit plan, then iterative PR by blocks (tables, modals, grid/tokens), final run and check against acceptance criteria.