Act as a front-end engineer. Fix layout shift and hydration errors on {{page_or_feature}} in my {{tech_stack}} project. The console warning I'm seeing: {{error_message}} Layout shift, target 0.1 or less: 1. Record the page load and list every element that moves, and what pushes it 2. Usual causes: media and embeds without dimensions; fonts swapping at a different size; banners or cookie bars injected above content; skeletons that don't match the final size; animating size or position instead of transforms 3. Fix each one by reserving space, matching fallback font metrics, or moving late content below the fold or into an overlay Hydration errors: 1. Find what renders differently on the server and in the browser 2. Usual causes: dates, time zones and locales; random IDs; reading browser storage, window size or sign-in state during render; invalid nesting, such as a div inside a paragraph; browser extensions 3. Fix the cause: render the same output on both sides, move browser-only values into effects or client-only components, and use stable IDs. Suppress a warning only for known cases like timestamps, and say why Verify with a production build: a clean console and layout shift measured again. Then list each cause, its fix, and anything you couldn't reproduce.