Change product switcher to neutral background with colored icon chip

[JakeSCahill]

Summary

Updates the sidebar product switcher from a full component-colored background to a neutral background with only the icon chip showing the component color.

Before/After

Before	After
Full colored background (e.g., red for Self-Managed)	Neutral background with colored icon chip

Changes

• Background: Changed from var(--component-color) to neutral semi-transparent rgba(255, 255, 255, 0.04)
• Icon chip: Now displays the component color with a 28x28px rounded container
• Hover/Active states: Updated for consistent appearance
• Text colors: Improved contrast for both light and dark themes

Rationale

The full colored background was visually heavy and drew too much attention. The new design:

• Provides a cleaner, more subtle appearance
• Still maintains component identification through the colored icon chip
• Better matches the overall sidebar aesthetic

Test plan

• Preview in light theme
• Preview in dark theme
• Test hover and active states
• Verify dropdown menu still works correctly

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	a47db72
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a1ef539b154fe0008bd83da
😎 Deploy Preview	https://deploy-preview-385--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 32 (🟢 up 2 from production) Accessibility: 89 (no change from production) Best Practices: 100 (no change from production) SEO: 88 (🔴 down 1 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dcb4d2f2-aa8c-4be2-aa8e-492acbae1565

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR updates the documentation site UI across layout, navigation, and product switcher components. Back-to-top button positioning is adjusted upward to avoid overlapping pagination, with additional mobile refinement. Sidebar footer navigation receives a more specific CSS selector fix to ensure the collapse toggle remains visible. The product switcher undergoes a visual redesign: background and border styling shifts from brightness filtering to transparent RGBA values with explicit transitions, the previously hidden product chip becomes visible with SVG icon support, text colors update across multiple label components, and light theme overrides switch to CSS variables and color-mix() for better maintainability. Product switcher templates are updated to render distinct SVG icons in both the main toggle button and dropdown menu items. Minor Algolia search text spacing is corrected.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• redpanda-data/docs-ui#331: Modifies Algolia noResults template text and formatting in src/partials/algolia-script.hbs.
• redpanda-data/docs-ui#376: Broader product switcher and sidebar UI styling changes in the same CSS and template files.

Suggested reviewers

• paulohtb6
• Feediver1

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change: converting the product switcher from a full component-colored background to a neutral background with a colored icon chip.
Description check	✅ Passed	The description is directly related to the changeset, providing clear context about the product switcher update including before/after states, specific changes, rationale, and test plan.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/product-switcher-neutral-bg

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/css/product-switcher.css`:
- Around line 48-51: The global rule ".sb-product-chip svg { width: 16px;
height: 16px; }" forces all SVGs to 16px and conflicts with the smaller dropdown
chip sizes (10/8/6px); update the CSS so the 16px sizing is scoped to
non-dropdown chips (for example target a specific modifier or direct child like
".sb-product-chip:not(.sb-product-chip--dropdown) svg" or use a more specific
selector for the main chip) and ensure dropdown selectors (the rules that set
10/8/6px) explicitly override or set their own sizes, or alternatively make the
SVG sizing responsive by using max-width:100%/height:auto so dropdown chips can
control their own dimensions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 334f987b-bc63-4420-b232-ddf4562e300f

📥 Commits

Reviewing files that changed from the base of the PR and between 3033b73 and 049f720.

📒 Files selected for processing (5)

• src/css/doc.css
• src/css/nav.css
• src/css/product-switcher.css
• src/partials/algolia-script.hbs
• src/partials/product-switcher.hbs

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Dropdown icon SVG size conflicts with chip sizes

.sb-product-chip svg { width: 16px; height: 16px; } applies globally, but dropdown chips are still 10/8/6px in this file, so many new SVGs will clip or become unreadable in menu options.

Suggested CSS fix

 .sb-product-chip svg {
   width: 16px;
   height: 16px;
   color: `#fff`;
 }
+
+/* Keep dropdown SVGs proportional to smaller chip containers */
+.sb-product-opt .sb-product-chip svg {
+  width: 8px;
+  height: 8px;
+}
+
+.sb-product-opt.sb-product-child .sb-product-chip svg {
+  width: 6px;
+  height: 6px;
+}
+
+.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
+  width: 5px;
+  height: 5px;
+}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	.sb-product-chip svg {
	width: 16px;
	height: 16px;
	color: #fff;
	.sb-product-chip svg {
	width: 16px;
	height: 16px;
	color: `#fff`;
	}
	/* Keep dropdown SVGs proportional to smaller chip containers */
	.sb-product-opt .sb-product-chip svg {
	width: 8px;
	height: 8px;
	}
	.sb-product-opt.sb-product-child .sb-product-chip svg {
	width: 6px;
	height: 6px;
	}
	.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
	width: 5px;
	height: 5px;
	}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/css/product-switcher.css` around lines 48 - 51, The global rule
".sb-product-chip svg { width: 16px; height: 16px; }" forces all SVGs to 16px
and conflicts with the smaller dropdown chip sizes (10/8/6px); update the CSS so
the 16px sizing is scoped to non-dropdown chips (for example target a specific
modifier or direct child like ".sb-product-chip:not(.sb-product-chip--dropdown)
svg" or use a more specific selector for the main chip) and ensure dropdown
selectors (the rules that set 10/8/6px) explicitly override or set their own
sizes, or alternatively make the SVG sizing responsive by using
max-width:100%/height:auto so dropdown chips can control their own dimensions.

[Feediver1]

LGTM - no critical issues. Suggestions up to you.

[Feediver1]

Docs standards review (UI/theme PR)

Files reviewed: 7 files (5 CSS, 2 HBS partials, 1 preview UI model). Not an .adoc content PR — review focuses on correctness, scope, and the CodeRabbit finding.

What this PR does

The PR title describes one thing — moving the sidebar product switcher from a full component-colored background to a neutral background with a 28×28 colored icon chip — but the diff actually contains seven distinct changes across 11 commits:

1. Product switcher restyle (product-switcher.css, product-switcher.hbs): neutral semi-transparent background, colored icon chip with SVG, hover/active states, light/dark theme parity.
2. SVG icons added to each product chip (sparkles for ADP, database for Data Platform, cloud, server for Self-Managed, waveform for Streaming, connector for Connect, book for generic/Labs).
3. Icons removed from small dropdown chips (10/8/6px sizing was too small for icons to render legibly).
4. Nav collapse toggle visibility fix on mobile (nav.css): moves the override out of the desktop media query so the sidebar collapse button is visible on all screens.
5. Back-to-top button positioning fix (doc.css): bumps bottom from 24px to 100px (and 120px on mobile) to clear the pagination Next button.
6. Search results space-before-link fix (algolia-script.hbs): explicit ${' '} after ? so HTML whitespace collapsing doesn't eat the space before "Let us know".
7. Header cosmetics (header.css): cloud link icon margin-left: 5px and platform-indicator font size 18px → 15px.

Critical issues

None — but two scope/structure concerns worth raising.

Scope concern

The PR title and description cover ~30% of the diff. Items 4 (mobile nav fix), 5 (back-to-top positioning), 6 (search-results spacing), and 7 (header cosmetics) are unrelated to the product-switcher restyle. They're all small and individually correct, but bundling them together means:

• If any one of them regresses, reverting takes back the unrelated work.
• Future archaeologists looking at git log for "back-to-top positioning" find a PR titled "product switcher to neutral background" — discoverability suffers.
• The PR description's test plan only covers product switcher, not the four other changes.

This is a soft call — the changes are all in the same theme bundle and all small — but if the team prefers atomic PRs, this should probably be split. At minimum, the PR description should be updated to enumerate all seven changes.

Suggestions

1. CodeRabbit's .sb-product-chip svg sizing finding is currently inert because commit 6 removed SVGs from dropdown chips entirely — but the global 16×16 rule on .sb-product-chip svg remains in product-switcher.css:48-51. If any future contributor adds a small icon to a dropdown chip, the rule will silently force it to 16px and break the 10/8/6px sizing chain. Scope the rule defensively now: either .sb-product-switch .sb-product-chip svg { ... } (main button only) or .sb-product-chip:not(.sb-product-chip--dropdown) svg { ... } with a corresponding modifier class on dropdown chips. Cheap insurance.

2. Hardcoded RGBA opacity values for hover/active states (rgba(255, 255, 255, 0.04), 0.06, 0.08, and the rgba(0, 0, 0, ...) equivalents in light theme). These read as design-system tokens — they're not unique to this component. Worth promoting to CSS variables (e.g., --surface-overlay-1, --surface-overlay-2, --surface-overlay-3) so other components can pick up the same hover/active gradient and dark/light theme switching becomes a one-line override. Not blocking, but the consistency dividends compound.

3. Magic-number bottoms on .back-to-top (100px desktop, 120px mobile). The inline comment explains why (avoid pagination Next button overlap), but those values are layout-dependent — if pagination styling changes, this will need to be re-tuned silently. A reference to the related component (e.g., /* Must clear .pagination-nav height (~64px desktop, ~84px mobile + 24px margin) */) would help future maintainers know what to recalculate against.

4. Commit 11's platform-indicator font-size change (18px → 15px) isn't in the PR description. Probably correct — "match nav items" is a reasonable rationale — but undocumented font-size changes are hard to verify against the design intent later. Worth a line in the body.

5. Light-theme sb-product-version uses color-mix(in oklab, var(--component-color, #4f46e5) 15%, transparent). color-mix is well-supported across modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+), but worth confirming the target browser support matrix includes those baselines. If older browser support matters, a @supports (color: color-mix(in oklab, red, blue)) fallback wrapper would be defensive.

CodeRabbit findings

1. .sb-product-chip svg sizing conflict (line 48-51) — see Suggestion 1. Defused by commit 6 but the underlying rule is still a footgun.

Impact on related work

• Independent of #373 and #384. Doesn't touch head-meta.hbs, resolve-resource.js, or the property-tooltips feature. Can merge in any order.
• The added preview UI model entries (data-platform, self-managed components in ui-model.yml) are good — they let the preview build exercise the hierarchy display path. Worth flagging that the preview model now has six components when it had three; if there's any preview tooling that iterates over site.components, it'll see more entries.

What works well

• Light/dark theme parity maintained. Every dark-theme override has a light-theme counterpart that's been thought through (proper grey-scale variables, semi-transparent overlays).
• Iteration on the ADP icon (commits 8 and 9: brain → sparkles, then a dedicated agentic-data-plane branch in the HBS so ADP pages get the right icon) shows responsiveness to the design call that sparkles is the more universal AI indicator.
• Removing SVGs from small dropdown chips after seeing them rendered is the right reflex — defending the choice in the commit message ("too small for icons, color-only chips provide cleaner UX") is the kind of post-hoc reasoning that's useful to a future contributor wondering why the asymmetry exists.
• Preview model is updated to exercise the new code paths — ui-model.yml now sets page.component to ADP so the sparkles-icon branch actually runs in the preview build.
• Aesthetic motivation is documented in the PR description (the original full-color background was "visually heavy") — design changes without that framing are harder to evaluate.