The Driver named eight filters -- people, region, block, country, language, religion, prayer, engagement -- and the rail rendered seven. engagement_status was already fully built: a label and getter, the Status section in the tree, and the Engagement column in the table. It had simply never been registered in the dropdown list, so the one piece missing was a single entry. Adding it exposed the constraint that goes with the count. The dropdowns are a fixed 168px on a 200px pitch, so eight need about 1428px. At a 1440 viewport that just fits; at 1280 the row reported scrollWidth 1414 against clientWidth 1252 -- a horizontal scrollbar, which is exactly what the Driver asked not to see. The row now wraps rather than scrolls. Wrapping is the right lever because the fixed 168px width is itself a Driver decision: a flexible width was what made the dropdowns jump as a selection changed. The justify-content pair is kept, not simplified -- its own comment records that `safe` degrades space-evenly to flex-start rather than pushing the first item to an offset a scroller can never reach. That hazard belonged to the scroller and costs nothing now, so it stays. Verified on a settled tree at three widths. 1440, 1280 and 1024 all render eight filters across two rows at identical offsets, with the row reporting no horizontal overflow and every filter fully inside the viewport. |
||
|---|---|---|
| .. | ||
| charts | ||
| hints | ||
| legends | ||
| map-controls | ||
| poster | ||
| qa | ||
| search | ||
| tables | ||
| PeopleGroupDetail.vue | ||
| README.md | ||
| ResearchMapFilterPanel.vue | ||
| ResearchMapSideMenu.vue | ||
| SideMenuDrawer.vue | ||
| WARNING.md | ||
library/components/ — shared Vue components
The map UI, built from parameterized pieces every app-profile reuses. Fix one here and every map benefits — never edit a shared component to customize one map.
library/components/
┌───────────────────────────────────────────┐
│ legends/ map-controls/ poster/ │
│ charts/ tables/ │
│ PeopleGroupDetail.vue SideMenuDrawer.vue │
│ ResearchMapFilterPanel.vue …SideMenu.vue │
└───────────────────────────────────────────┘
reused by every app-profile via @map/components/…
legends/,map-controls/,poster/each have their own README.- Every component uses
<script setup>, callsuseShadowStyles(), and reaches stores viainject('mapStore' | 'uiStore' | 'dataStore')— never a direct store import.
Full catalog + conventions:
../../documentation/architecture/components.md ·
per-file roles: ../../documentation/reference.md.