Reported from a phone: on the Regions tab, "2 posters per row" for the country posters did not work -- a 390px phone showed ONE per row. THE CAUSE is a deliberate clamp in PosterWall. The per-row setting is 2, but the grid is Math.min(perRow, fits) with fits = floor((viewport - 36) / 210), and at 390 that is floor(354 / 210) = 1. So the setting said two and the phone silently showed one. ★ WHY THE CLAMP EXISTED, AND WHY IT IS SAFE TO RELAX NOW. It was added when a two-up card (~162-170px) CLIPPED its action labels -- 'Prayer List' and 'Poster Map' both read 'Pra...', and Romanian's 'Pachet de cartonase' was measured at 54 of 81 controls clipped at ro/390. That was then fixed separately: the labels WRAP (.pfs > .pbtn, "a label too long for its box wraps"). With wrapping in place the clamp no longer protects anything; it only costs the phone a column. ★ IT IS OPT-IN, NOT A GLOBAL CHANGE. PosterWall is shared by twelve files, several of them frozen experimental maps. A new minCardPx prop defaults to 0, which means the existing 210px clamp, so every wall that does not set it lays out byte-for-byte as before. Only regions-list sets 150, which gives two per row at 360, 390 and 414, still one at 320 (which genuinely cannot hold two), and no change on desktop (already capped at the per-row setting of 2). MEASURED on the regions-list leaf page, this branch served locally, against FINAL on :4611 -- by hit test and by eye: FINAL @390 en 1 per row, 367px cards AFTER @390 en 2 per row, 169px cards, 0/123 labels clipped AFTER @390 ro 2 per row, 0/123 labels clipped <- the old clipping corner AFTER @390 ar 2 per row, RTL, 0/84 labels clipped AFTER @1440 en 2 per row, unchanged 0 horizontal overflow and 0 console errors in every cell. The print buttons now stack three high on a phone card instead of sharing a line. KNOWN, COSMETIC, NOT CHANGED: at two-up the card's "53 UPG · Show on map" pill wraps "Show on / map" onto a second line. Readable, not clipped. |
||
|---|---|---|
| .. | ||
| charts | ||
| dashboards | ||
| hints | ||
| info | ||
| legends | ||
| map-controls | ||
| maps | ||
| poster | ||
| qa | ||
| regions | ||
| search | ||
| tables | ||
| BackToTopButton.vue | ||
| LargerScreenNotice.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.