fix(#1329): accordion map controls on mobile, drop 200px scroll cap#1333
Merged
Conversation
added 2 commits
May 23, 2026 20:00
E2E asserting: - ≥1 accordion section with aria-expanded toggle (mobile 375x812) - ≤1 section expanded by default (single-open behavior) - panel does NOT require internal scroll - clicking another toggle collapses the first - desktop 1280x800: layout unchanged, all controls visible Currently fails: the panel uses static fieldsets with no accordion behavior — all sections render expanded, exceeding the 200px cap and forcing internal scroll on mobile. Refs #1329
Mobile (≤640px): - Each fieldset.mc-section legend becomes an aria-expanded toggle. - Initial state: first section open, others collapsed (single-open). - Clicking a closed section auto-closes the currently-open one. - Collapsed sections hide their body via .mc-collapsed (CSS-only inside the @media (max-width: 640px) block so desktop is unaffected). - max-height: 200px → calc(100vh - 80px). Combined with single-open accordion, panel no longer needs internal scroll. - Legends styled as flex with ▸/▾ disclosure indicator (var-driven). Desktop unchanged: - .mc-collapsed has no rules outside the mobile media query, so all sections render fully expanded as today. - panel position:absolute and clamp() width preserved. Fixes #1329
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On mobile (≤640px) the Map controls panel was capped at
max-height: 200pxand forced an internal scrollbar through all the layer/filter/display toggles. This makes every section a single-open accordion and drops the cap, so the visible content always fits without internal scroll.Changes
public/map.js— Eachfieldset.mc-sectionlegend becomes a tappablearia-expandedtoggle. On mobile the first section opens by default; activating any other section auto-closes the previously open one (single-open). Desktop still renders all sections expanded.public/style.css—@media (max-width: 640px)rules:max-height: 200px→calc(100vh - 80px)..mc-collapsed > *:not(legend) { display: none }hides bodies of collapsed sections.var(--text-muted)).Test
test-issue-1329-map-controls-accordion-e2e.js(added to CI indeploy.yml):position: absolute, panel <50% viewport wide, all controls visible.Red commit:
85fdc25267eaf210369371f55da767016435dbff(test fails on master — no accordion toggles exist; all fieldsets render expanded under the 200px cap forcing scroll).E2E assertion added:
test-issue-1329-map-controls-accordion-e2e.js:56.Fixes #1329