tailwind

Two of the four ISO badges in our hero pointed at superseded editions. The edition year is data to audit, not static text.

TL;DR: Hardcoded certification years in frontend content rot silently because ISO standards get revised periodically. Two of four badges were already outdated, and even checking statuses has traps like misattributed IAF documents. Fix: keep one source-of-truth array, verify against the ISO site yearly, or drop edition years if unmaintained.

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.

Dark navy header felt heavy in light mode. The fix: bake 92% alpha into the --color-header token so backdrop-blur works everywhere without per-component overrides.

TL;DR: Slapping bg-white/60 on a navbar breaks fast, since child elements inherit transparency and fixes scatter across files. The fix is baking alpha into a --color-header token (about 92 percent opacity), which cascades to every consumer and pairs cleanly with backdrop-blur-md. Trade-off: the header decouples from the global background token, but one line brings it back if needed.

A missing globals.css import after moving the root layout into app/[locale] stripped every page of styling — while the build stayed green.

TL;DR: An i18n refactor moved the Next.js root layout into app/[locale]/layout.tsx and accidentally dropped the globals.css import. Without that file Tailwind v4 never loaded, so the site rendered as unstyled HTML while the build stayed green. The fix was re-adding the import, a reminder to visually check pages and grep for globals.css after layout changes.

A position sticky sidebar that scrolled away with the page, and the three CSS preconditions I now check before trusting sticky again.

TL;DR: A sticky sidebar in a flex layout failed silently because it broke all three preconditions. Flexbox's default stretch left the aside no scroll room, fixed with items-start, while a fixed header demanded a custom top offset. The author now avoids overflow-clipping ancestors, removed redundant height caps, and made this layout a standard pattern.

The AI entry in my navbar changed color after a menu reorder. A lesson in modulo index color assignment and fixing it with data identity.

TL;DR: Styling nav entries with a modulo index ties colors to render position, so reordering the menu silently reshuffles accents. Pinning the special "Ask AI" entry to its href identity keeps its color stable. Adding an idle pill also satisfies WCAG 1.4.1, since shape reinforces hue for users who can't distinguish colors.

Shrinking the desktop chat input field and buttons with four responsive Tailwind classes, no separate component and no JavaScript required.

TL;DR: The chunky mobile-sized chat composer was wasting desktop space, but a separate component felt like overkill. Four responsive Tailwind classes fixed it: base sizes stay touch-friendly for phones, sm: variants tighten padding and shrink buttons on desktop. Trade-off is width-based, not pointer-based, so wide touchscreen laptops get small buttons too.

Fullscreen mobile wrapper under a 66px fixed header using mt-66px plus calc 100dvh-66px, uncapped transcript, and a compact messaging header.

My chat history sidebar vanished at the lg breakpoint: a CSS order tie-break and a details element forced into flex duty, two roots in one commit.

TL;DR: A missing sidebar at lg breakpoints came down to two bugs from a mobile accordion refactor. Equal flex order values let the center wrapper win the source-order tie-break, fixed with an explicit lg:order-2. A details element can't flex-size children in Chromium, so it became state-driven with aria-expanded instead.