From 009d73b44e1cf290491853aff46e85b330ed88b0 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 15:32:52 +0000 Subject: [PATCH] The share button had to look smaller; its tap target did not have to shrink with it rega's 3c3bde71 fixed a real defect: ShareButton is the map toolbar's 40px round control plus a 2px ring, so it measured 44px inside a 38px bar and overflowed it. At 28px + ring it matches the search box, which is what the Driver asked for. The side effect is that the TAP TARGET went to 32px, and this repo states its own floor twice -- DataTable.vue:294, "44px is the accessible tap target; anything smaller is a miss on a phone", and LegendDesktop.vue:124 sizes rows to keep it. Nothing in the change said otherwise; the target simply followed the drawing, which is what tap targets do unless someone stops them. A transparent box centred on the button restores it without moving a pixel: absolutely positioned so it changes no layout, and part of the button so it takes the same clicks. The visual stays exactly as the Driver approved. 44 WIDE, 38 TALL, AND THE 6px IS DELIBERATE. The bar is 38px, so a 44px-tall target would hang 3px over the filters row and start taking taps meant for a filter -- one miss traded for another. 44x38 is the largest target that costs nothing else. Closing the last 6px needs a taller bar, and the Driver has just decided that axis in the other direction, so it is asked rather than assumed. --- .../components/dashboards/DashboardTopBar.vue | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) 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.