layout

Split a card list into two rows; row 2 breaks out of the container with w-screen and a calc margin, with no horizontal scrollbar.

TL;DR: w-screen breaks layouts because 100vw ignores the scrollbar, leaving your element a few pixels too wide. Fix it with the full-bleed combo w-screen, max-w-[100vw], ml-[calc(50%-50vw)], and padding, then scope overflow-hidden to just that section. Use overflow-clip instead if a sticky header breaks, and an IIFE renderCard to split rows without duplicating markup.

Moving the root layout into the [locale] segment makes html lang server-rendered, deletes the client-side language bootstrap, and passes the structural audit.

TL;DR: We replaced a client-side script that guessed the reader's language with Next.js's recommended pattern: nesting the root layout under a dynamic locale segment so the lang attribute renders correctly on the server. This brought free 404s for unknown locales, static prerendering, and correct screen-reader pronunciation, even on 404 pages. Detection now lives in an Accept-Language redirect instead.

The output card was already square at xl, but the panel still looked like a box in a box; the wrapper's padding and gap had to go too.

TL;DR: The chat center panel card was already square, yet a thin white strip and sidebar gaps remained. The wrapper still carried xl:p-4 and default gap-4, so the one-line fix was xl:p-0 xl:gap-0 on the parent. Lesson: a wrong-looking element isn't always the wrong one; match child resets with parent spacing resets at the same breakpoint.

A fixed navbar takes no space in the document flow, so a 100dvh chat panel still ran short. The fix pairs xl:mt-14 with a 100dvh subtraction.

TL;DR: A fixed navbar floats above the document flow, so it occupies no space and the panel's top slid underneath it despite having the correct height. The fix pairs xl:mt-14 with xl:h-[calc(100dvh-3.5rem)], since h-dvh only answers how tall, not where content starts. Visually, padding and gaps were dropped for one border divider, creating an edge-to-edge three-column surface.

Cards that refuse to line up with the navbar logo come down to gutters: every container moved from px-4 sm:px-6 lg:px-8 to px-3 sm:px-4.

TL;DR: A misaligned card row turned out to be a Tailwind gutter mismatch: the main section used px-4 sm:px-6 lg:px-8 while the navbar used px-3 sm:px-4, leaving a 16-pixel difference at large screens. The fix normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4, giving one source of truth. Lesson: straight-line misalignment usually means two padding systems assumed identical.

Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.

TL;DR: The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.