Skip to content

ResourceControls: sections scroll prematurely (equal height-division) + accordion chevrons point up/down instead of right/down #1462

@cliffhall

Description

@cliffhall

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

  • With any combination of populated sections, no section shows an internal scrollbar while there is still unused vertical space in the panel — sections grow to fit their content first.
  • Scrolling only begins once the open sections' combined content exceeds the panel's full available height (panel stays viewport-bounded, matching the other screens' bottom padding).
  • The equal / n height division in panelMaxHeight is replaced with a content-aware approach (or a single bounded scroll region).
  • Accordion chevrons point right when the section is closed and down when open, reusing the RiArrowRightSLine / RiArrowDownSLine convention from ResourceLink.tsx.
  • Disabled (empty, e.g. Subscriptions (0)) sections still render a correctly-oriented (right) chevron.
  • Works across light/dark and with 0, 1, 2, and 3 open sections.
  • ResourceControls.test.tsx / .stories.tsx updated to cover the chevron orientation and the no-premature-scroll behavior (stories for sparse vs. overflowing sections).
  • npm run validate + npm run test:storybook pass.

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.

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions