Two panels slide in the mobile nav. The main one animates `transform`. Its
sibling animated `left` — which relayouts the nav subtree every frame AND
registers as layout shift, because moving an element's layout box is exactly
what CLS measures. Measured under a 4x CPU throttle at 390x844: CLS 0.726 with
`left`, 0 with `transform`. Google calls anything above 0.25 "poor", so the
menu was scoring nearly 3x poor on a tap.
The rewrite is pixel-identical, not an approximation. The element is absolute
+ w-full inside a containing block with no padding, so `left: 0` is its static
position and translateX(100% + 24px) reproduces the old offset exactly. It now
mirrors its sibling: same distance, same duration, same property.
Motion also moves out of this repo. The local `skeleton-shimmer` keyframe is
retired in favour of the design system's loading state — per-element
background-position shimmer measures 33.6fps at 1460 concurrent skeletons and
13.8fps at 3000 under the same throttle, while skeletons that hold still
measure 120fps at every count. Reasoning and full numbers are in section 6c of
@luxfi/ui/tokens.css.
Also wraps one 174-char className. It was already over the 160 limit; no
staged change had made the linter look at this file until now.
Co-authored-by: Hanzo Dev <[email protected]>
zeekayandHanzo Dev
345efd519e