Summary
In the announcements popover/panel (frontend/src/layout/Navbar/Announcements.tsx), expanding an accordion item appears to increase the vertical space above that item's own title (between the item's top border and the title text), compared to its collapsed state. Screenshots comparing collapsed vs. expanded:
- Collapsed: title sits close to the item's top border.
- Expanded: visibly more space between the item's top border and the title text.
Investigation so far (inconclusive)
Traced through Announcements.module.scss / Announcements.tsx looking for anything that changes based on the accordion item's data-state:
.item padding is a fixed sp.$spacing-sm on all sides — not state-dependent..summary is hidden via .item[data-state="open"] & { display: none; }, but it's a sibling after .titleRow in DOM order, so hiding it shouldn't affect the title's position above it..titleRow uses align-items: center (not the initially-suspected default stretch), so the .chevron's margin-top: -0.15rem shouldn't be growing the row.Accordion.Content (Radix) is unmounted entirely when closed (confirmed via @radix-ui/react-collapsible source — children: isOpen && children), so it can't be pushing anything above the trigger.- Attempted to verify visually via a headless Playwright pass against Storybook's
WithAnnouncements story, but hit an unrelated pre-existing Storybook bug (You cannot render a <Router> inside another <Router>) when loading the layout-navbar--with-announcements story in isolation — blocked automated repro. This Storybook bug is separate and may be worth its own issue if it reproduces outside this investigation.
Next steps
Needs actual browser DevTools inspection (Box Model / computed styles) on the title span and its ancestors (.item, .accordionTrigger, .titleRow) in both collapsed and expanded states, to identify which element's padding/margin/position actually differs. Static code reading did not surface a plausible state-dependent cause.
Where
frontend/src/layout/Navbar/Announcements.tsxfrontend/src/layout/Navbar/Announcements.module.scss
Summary
In the announcements popover/panel (
frontend/src/layout/Navbar/Announcements.tsx), expanding an accordion item appears to increase the vertical space above that item's own title (between the item's top border and the title text), compared to its collapsed state. Screenshots comparing collapsed vs. expanded:Investigation so far (inconclusive)
Traced through
Announcements.module.scss/Announcements.tsxlooking for anything that changes based on the accordion item'sdata-state:.itempadding is a fixedsp.$spacing-smon all sides — not state-dependent..summaryis hidden via.item[data-state="open"] & { display: none; }, but it's a sibling after.titleRowin DOM order, so hiding it shouldn't affect the title's position above it..titleRowusesalign-items: center(not the initially-suspected defaultstretch), so the.chevron'smargin-top: -0.15remshouldn't be growing the row.Accordion.Content(Radix) is unmounted entirely when closed (confirmed via@radix-ui/react-collapsiblesource —children: isOpen && children), so it can't be pushing anything above the trigger.WithAnnouncementsstory, but hit an unrelated pre-existing Storybook bug (You cannot render a <Router> inside another <Router>) when loading thelayout-navbar--with-announcementsstory in isolation — blocked automated repro. This Storybook bug is separate and may be worth its own issue if it reproduces outside this investigation.Next steps
Needs actual browser DevTools inspection (Box Model / computed styles) on the title
spanand its ancestors (.item,.accordionTrigger,.titleRow) in both collapsed and expanded states, to identify which element's padding/margin/position actually differs. Static code reading did not surface a plausible state-dependent cause.Where
frontend/src/layout/Navbar/Announcements.tsxfrontend/src/layout/Navbar/Announcements.module.scss