The Driver scrolls further than he should to reach the legend options on a phone, and the note under the legend is why — but not by pushing them down. It was the last child of .legend-content, a natural-height sibling of a flex:1 options panel, so every pixel it took was a pixel the options' own scroller lost. The tree got a shorter viewport and the same rows moved further away. Moving it WITHIN the sheet would have recovered nothing, which is worth stating because it was the obvious reading of the instruction: the sheet's open height is fixed at 30%, so anything inside it costs the options the same wherever it sits. Out here the note costs them nothing and they keep the whole sheet. It is positioned off --legend-sheet-h, which a ResizeObserver already writes for the engine's own bottom controls, so it tracks the sheet as it opens, drags and collapses instead of assuming a height. It stays pointer-events:none with the sheet root: it is text, nothing in it is tappable, and it must never swallow a map drag. The note is kept, not removed — he accepted the text and objected only to it breaking the legend. Its scrim follows `dark` for the same reason the note itself takes that prop: a white halo behind light text is a smear rather than legibility. NEEDS EYES at 390x844: whether it reads over an arbitrary basemap, which is the one thing moving it out of a white panel puts at risk. |
||
|---|---|---|
| .. | ||
| charts | ||
| dashboards | ||
| hints | ||
| legends | ||
| map-controls | ||
| poster | ||
| qa | ||
| regions | ||
| search | ||
| tables | ||
| BackToTopButton.vue | ||
| PeopleGroupDetail.vue | ||
| README.md | ||
| ResearchMapFilterPanel.vue | ||
| ResearchMapSideMenu.vue | ||
| SideMenuDrawer.vue | ||
| ViewSelect.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.