Skip to content

fix(sidebar): align subgroup caret with group caret#4

Merged
mhenrixon merged 1 commit into
mainfrom
fix/caret-alignment
Jul 2, 2026
Merged

fix(sidebar): align subgroup caret with group caret#4
mhenrixon merged 1 commit into
mainfrom
fix/caret-alignment

Conversation

@mhenrixon

Copy link
Copy Markdown
Owner

Summary

Sidebar sub-group carets (Guide, Actions, Data display) sat below-left of
the label
, while top-level group carets (DOCS, COMPONENTS) were
right-aligned — inconsistent placement.

Root cause: the sub-group <summary> carried .menu-title. daisyUI reserves
.menu-title for a static (non-<details>) heading; its rotating-caret layout
rule targets summary:not(.menu-title). So a .menu-title summary loses the
display:grid layout and its ::after chevron falls to default flow
(below-left), instead of right-aligning via justify-self:flex-end.

Confirmed against the authoritative sources: daisyUI's own collapsible-submenu
example and the daisyui gem's CollapsibleSubMenu both render a collapsible
summary as a plain <summary>, never .menu-title.

Fix: drop .menu-title from the sub-group summary and give it explicit muted
utilities. daisyUI's grid layout now applies to both levels, so every caret
right-aligns in the same column.

Verification

  • Desktop screenshot: DOCS, Getting started, Reference carets all
    right-aligned in one column.
  • bundle exec rspec — 49 green; bundle exec rubocop — clean.
  • CSS rebuilt; both summaries render as plain (non-menu-title).

The sub-group summaries carried .menu-title, but daisyUI reserves that for a
STATIC (non-<details>) heading — its rotating-caret layout rule targets
summary:not(.menu-title). So a .menu-title summary lost the display:grid layout
and its chevron dropped below-left of the label, while the top-level group's
chevron was right-aligned. Mismatched carets.

Per daisyUI's own collapsible-submenu example (and the daisyui gem's
CollapsibleSubMenu), a collapsible summary is a PLAIN summary, never .menu-title.
Drop .menu-title from the sub-group summary and style it with explicit muted
utilities. Now daisyUI's grid layout applies to both levels and every caret
right-aligns in the same column. Verified with a desktop screenshot.
@mhenrixon mhenrixon merged commit 73e52fd into main Jul 2, 2026
@mhenrixon mhenrixon deleted the fix/caret-alignment branch July 2, 2026 09:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant