Problems
The Resources controls panel (clients/web/src/components/groups/ResourceControls/ResourceControls.tsx) has three accordion sections — URIs, Templates, Subscriptions — any or all of which may be populated. Two issues:
1. Sections scroll before the panel is full
Each Accordion.Panel wraps its list in <ScrollArea.Autosize mah={maxHeight}>, where maxHeight comes from panelMaxHeight(openSections.length) (ResourceControls.tsx:49-54):
function panelMaxHeight(openCount: number): string {
const n = Math.max(openCount, 1);
const fixedChrome = 300;
const perPanelChrome = 20;
return `calc((100vh - … - ${fixedChrome + perPanelChrome * n}px) / ${n})`;
}
This divides the available height equally among the open sections (… / n). So every open section is capped at 1/n of the height regardless of how many items it holds. A section with many items hits its cap and shows an internal scrollbar, while sibling sections with few/zero items leave their equal share unused.
In the screenshot, URIs (7) is scrolling (note the scrollbar over architecture.md / extension.md) even though Templates (2) and Subscriptions (0) below it leave the panel mostly empty — there's a large blank area beneath the panel. No section should have to scroll while there is still unused vertical space.
Desired: sections size to their content and share the available height by need, not equally. No section scrolls until the combined content of the open sections would exceed the panel's full available height; only then does scrolling begin. (E.g. a single bounded scroll region around the accordion body, or a content-aware height allocation, instead of the fixed / n split.)
2. Accordion chevrons point the wrong way
The accordion uses Mantine's default chevron, which points down when closed and rotates to up when open (the ^ on the open URIs/Templates sections in the screenshot).
Desired: the standard disclosure direction —
- closed → chevron points right (
›)
- open → chevron points down (
⌄)
The codebase already has exactly this pattern in ResourceLink.tsx:116 (const Chevron = expanded ? RiArrowDownSLine : RiArrowRightSLine;), so reuse react-icons/ri RiArrowRightSLine / RiArrowDownSLine for consistency. Note Mantine's default chevron rotation is 180° (which would turn a right-chevron into a left-chevron), so this likely needs disableChevronRotation plus a right-pointing chevron that rotates 90° on open (via a theme/Accordion.ts variant / App.css), or an open-state-driven icon swap.
Screenshot
Screenshot (scrolling-resources.png) to be attached by the issue author.
URIs (7) shows an internal scrollbar while Templates (2) / Subscriptions (0) and the area below the panel are empty; open sections show an up chevron.
Acceptance criteria
Notes
ServerSettingsForm (components/groups/ServerSettingsForm/ServerSettingsForm.tsx) is the only other Accordion consumer. If the chevron change is made app-wide via a theme/Accordion.ts variant, verify it there too; if it should stay scoped to the Resources panel, apply it to that Accordion instance only.
Accordion, ScrollArea, and the react-icons/ri arrows are all existing dependencies — no new surface.
- Per project conventions, prefer a Mantine theme variant over CSS; only pseudo-selectors / rotation transforms belong in
App.css.
Problems
The Resources controls panel (
clients/web/src/components/groups/ResourceControls/ResourceControls.tsx) has three accordion sections — URIs, Templates, Subscriptions — any or all of which may be populated. Two issues:1. Sections scroll before the panel is full
Each
Accordion.Panelwraps its list in<ScrollArea.Autosize mah={maxHeight}>, wheremaxHeightcomes frompanelMaxHeight(openSections.length)(ResourceControls.tsx:49-54):This divides the available height equally among the open sections (
… / n). So every open section is capped at1/nof the height regardless of how many items it holds. A section with many items hits its cap and shows an internal scrollbar, while sibling sections with few/zero items leave their equal share unused.In the screenshot, URIs (7) is scrolling (note the scrollbar over
architecture.md/extension.md) even though Templates (2) and Subscriptions (0) below it leave the panel mostly empty — there's a large blank area beneath the panel. No section should have to scroll while there is still unused vertical space.Desired: sections size to their content and share the available height by need, not equally. No section scrolls until the combined content of the open sections would exceed the panel's full available height; only then does scrolling begin. (E.g. a single bounded scroll region around the accordion body, or a content-aware height allocation, instead of the fixed
/ nsplit.)2. Accordion chevrons point the wrong way
The accordion uses Mantine's default chevron, which points down when closed and rotates to up when open (the
^on the open URIs/Templates sections in the screenshot).Desired: the standard disclosure direction —
›)⌄)The codebase already has exactly this pattern in
ResourceLink.tsx:116(const Chevron = expanded ? RiArrowDownSLine : RiArrowRightSLine;), so reusereact-icons/riRiArrowRightSLine/RiArrowDownSLinefor consistency. Note Mantine's default chevron rotation is 180° (which would turn a right-chevron into a left-chevron), so this likely needsdisableChevronRotationplus a right-pointingchevronthat rotates 90° on open (via atheme/Accordion.tsvariant /App.css), or an open-state-driven icon swap.Screenshot
Screenshot (
scrolling-resources.png) to be attached by the issue author.URIs (7) shows an internal scrollbar while Templates (2) / Subscriptions (0) and the area below the panel are empty; open sections show an up chevron.
Acceptance criteria
/ nheight division inpanelMaxHeightis replaced with a content-aware approach (or a single bounded scroll region).RiArrowRightSLine/RiArrowDownSLineconvention fromResourceLink.tsx.Subscriptions (0)) sections still render a correctly-oriented (right) chevron.ResourceControls.test.tsx/.stories.tsxupdated to cover the chevron orientation and the no-premature-scroll behavior (stories for sparse vs. overflowing sections).npm run validate+npm run test:storybookpass.Notes
ServerSettingsForm(components/groups/ServerSettingsForm/ServerSettingsForm.tsx) is the only otherAccordionconsumer. If the chevron change is made app-wide via atheme/Accordion.tsvariant, verify it there too; if it should stay scoped to the Resources panel, apply it to thatAccordioninstance only.Accordion,ScrollArea, and thereact-icons/riarrows are all existing dependencies — no new surface.App.css.