diff --git a/plugin-designs/research-dashboard/src/components/dashboards/DashboardTopBar.vue b/plugin-designs/research-dashboard/src/components/dashboards/DashboardTopBar.vue index 48cf58bec..e9892529a 100644 --- a/plugin-designs/research-dashboard/src/components/dashboards/DashboardTopBar.vue +++ b/plugin-designs/research-dashboard/src/components/dashboards/DashboardTopBar.vue @@ -218,8 +218,23 @@ useShadowStyles(` (36px under 768px) + a 2px rainbow ring, so it measured 44px in a 38px bar: taller than the bar itself. Here it takes the bar's own control scale instead: 28px + the ring = 32px, the search box's height, with the icon at the search icon's 15px. Scoped to .rd-topbar, so the map toolbars keep their 40px button. */ - .rd-topbar .share-wrap .mcb{ width:28px; height:28px; } + .rd-topbar .share-wrap .mcb{ width:28px; height:28px; position:relative; } .rd-topbar .share-wrap .mcb svg{ width:15px; height:15px; } + /* ★ THE BUTTON GOT SMALLER TO LOOK RIGHT; THE THING A FINGER HAS TO HIT DID NOT HAVE TO. Shrinking the + control to 28px (32 with the ring) also shrank the TAP TARGET to 32px, and this repo states its own + floor in two places — DataTable.vue:294 "44px is the accessible tap target; anything smaller is a miss + on a phone", and LegendDesktop.vue:124 sizing rows to keep it. A transparent box centred on the button + restores the target without moving a pixel of the drawing: it is absolutely positioned, so it changes + no layout, and it is part of the button, so it takes the same clicks. + ★ 44 WIDE, 38 TALL, AND THE SHORTFALL IS DELIBERATE RATHER THAN OVERLOOKED. The bar is 38px + (--rd-topbar-h), so 44 vertical cannot fit inside it: the extra 3px each side would hang over the + filters row below and start eating taps meant for a filter — trading one miss for another. 44x38 is + the largest target that costs nothing. Closing the last 6px needs a taller bar, which is a look + decision the Driver already made in the other direction, so it is asked rather than assumed. */ + .rd-topbar .share-wrap .mcb::after{ + content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); + width:44px; height:var(--rd-topbar-h,38px); + } /* primary FILTER search bar (shared SearchBar → bus.setSearch), lifted into the topbar row so it sits ABOVE the filters-dropdowns band (card BUG-RESEARCH-DASHBOARD-HEADER-STACK-WRONG). Compact it for the 52px bar: shrink the primitive's padding/height so the white box fits.