design
Technical notes on web development, DevOps, and AI integration.
3 articles
- 15:30frontend
The Context Panel Stopped Being a Card: Border Became a Divider
The right context panel dropped its floating-card frame for a single left-border divider, matching the sidebar's design language.
TL;DR: The author changed a right panel from floating card to flush panel by swapping rounded corners and a four-sided border for a single left border. The border's job shifted from frame to divider, not removal. Lesson: when converting a card to a panel, ask what the border should do now.
#css#tailwind#frontend - 03:12frontend
My Light-Mode Navbar Uses bg-white/60, Not the Token
Brightening the shared background token shifts the whole page. A navbar needs a solid chrome feel, so a literal color plus the dark variant wins.
TL;DR: Light mode made the navbar look like dirty glass because the shared background token added a grayish cast. The fix swaps in literal bg-white utilities for light mode in both scroll branches while dark mode keeps the token. Trade-off: the navbar won't follow future theme changes, but a dedicated token is a one-line swap later.
#css#tailwind#design - 03:07frontend
I Moved the Chat Mode Toggle to the Top of the Sidebar
Mode chips at the bottom of a sidebar stay invisible until you scroll. Moved to the top, with type and aria-pressed kept intact.
TL;DR: Moving the chat mode switch to the sidebar's top fixed a real usability bug: users only found the search-versus-about toggle after scrolling past the decision point. Core lesson: layout order is decision order, so mode-setting controls belong above scrollable content. The move kept accessibility attributes like aria-pressed and type=button intact, shrinking the form to one responsibility.
#react#accessibility#tailwind