Stretch sidebar search bar full-width and align colors with site theme

[mateo-berri]

What

Restyles the Algolia DocSearch button rendered in the docs sidebar so that it:

• Stretches the full width of the sidebar column (previously rendered as a short pill that only filled a portion of the available space).
• Adopts the same neutral / surface colors used elsewhere on the site, replacing the default purple shortcut keys / blue-tinted background with palette-matched tones for both light and dark mode.
• Picks up the brand primary color on hover/focus (green in light, teal in dark) with a soft focus ring, consistent with other interactive elements.

Only the sidebar search trigger is affected — the mobile navbar trigger and the open DocSearch modal use the default styling. Scoping is done via the searchBarContainer CSS module class so global DocSearch consumers aren't touched.

Where

src/theme/DocSidebar/styles.module.css — adds overrides targeting :global(.DocSearch-Button) and its inner parts (-Container, -Placeholder, -Keys, -Key) for both light and [data-theme='dark'].

Screenshots

Light mode:

Sidebar search — light mode

Dark mode:

Sidebar search — dark mode

Verification

• npm run build succeeds.
• Built CSS contains the scoped overrides (.searchBarContainer_<hash> .DocSearch-Button …).
• Headless Chrome screenshots in light and dark mode confirm the search bar fills the sidebar and matches the site palette.

_{To show artifacts inline, enable in settings.}

Slack Thread

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	May 23, 2026 5:41pm