fix: CSS edge case where caret isn't moved to left

[arikorn]

Also carry over change from companion to support dropdown menus with icons.

Summary by CodeRabbit

• Style
  • Improved visual alignment and consistency of header dropdown icons and sidebar items for a more uniform look.
  • Refined caret placement and behavior across menu states (including sublists and linked pages) to improve visibility and navigation clarity.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates src/css/custom.css: expands navbar dropdown selector scope, relocates and unifies caret rules (including pseudo-elements) to the left edge, replaces isolated pseudo-element blocks with grouped rules, and adds explanatory comments around caret/link behavior.

Changes

Cohort / File(s)	Summary
CSS Styling src/css/custom.css	Expanded .navbar-sidebar__items selector to also target .theme-layout-navbar-right .dropdown__menu; moved caret to far-left by unifying .menu__caret and .menu__link--sublist-caret::after rules; replaced isolated ::before block with grouped pseudo-element rules for consistent scaling/margin; added clarifying comment blocks about caret and linked-page behavior.

Poem

✨ Carets shifted, styles extend,
Dropdowns dressed from end to end,
Grouped selectors sing in tune,
CSS humming—nice and soon 🎨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main CSS fix - addressing a caret alignment issue - and directly relates to the primary changes in the pull request.

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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]

🧹 Nitpick comments (2)

src/css/custom.css (2)

147-149: Tiny comment nit — the leading comment no longer covers both cases.

The comment on line 147 says "when the window is narrow, the right-header icons are in the pull-down sidebar," but the rule now also targets .theme-layout-navbar-right .dropdown__menu, which is visible on wide windows. It's a small thing, but worth a quick update so future readers aren't confused!

📝 Suggested comment update

-/* when the window is narrow, the right-header icons are in the pull-down sidebar */
+/* when the window is narrow, the right-header icons are in the pull-down sidebar;
+   when the window is wide, the right-header icons can also appear in a dropdown menu */

---

221-236: Heads-up: &::before is a no-op for the ::after leg of the combined selector.

Inside the shared block, &::before { scale: 0.6; } resolves to two rules:

• .menu__caret::before { scale: 0.6; } — ✅ valid and applied.
• .menu__link--sublist-caret::after::before { scale: 0.6; } — ❌ chained pseudo-elements aren't valid CSS; browsers silently drop it.

The actual scaling of ::after is correctly handled by the new standalone rule at lines 234–236, so the behavior is right! This is purely a readability note — someone skimming the shared block might assume &::before applies to both legs. Totally fine to leave as-is since it works, but splitting the selectors would make the intent crystal-clear:

✨ Optional clarity refactor

-/* move the expand/contract caret to the far left for improved visibility/group offsetting.
-   The second class is active if the subdirectory has no linked-page (so clicking on it just opens the sublist w/o changing the main panel.
-   */
-.menu__caret,
-.menu__link--sublist-caret::after {
+/* move the expand/contract caret to the far left for improved visibility/group offsetting. */
+.menu__caret {
 	order: -1;
 	padding-left: 0.45em;
 	padding-right: 0;
 	border-radius: 0.5rem 0 0 0.5rem; /* match the outer box's corner */

 	&::before {
 		scale: 0.6;
 	}
 }

-/* when there's no linked page, the caret is in '::after' itself, not nested within the element. */
-.menu__link--sublist-caret::after {
+/* The second class is active if the subdirectory has no linked-page (so clicking on it just opens the sublist w/o changing the main panel).
+   The caret is in '::after' itself, not nested within the element. */
+.menu__link--sublist-caret::after {
+	order: -1;
+	padding-left: 0.45em;
+	padding-right: 0;
+	border-radius: 0.5rem 0 0 0.5rem;
 	scale: 0.6;
 }