doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The share button had to look smaller; its tap target did not have to shrink with it

Browse source 
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.
This commit is contained in:
Doxa Maps 2026-09-28 15:32:52 +00:00
parent 379509c5c2
commit 009d73b44e
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
plugin-designs/research-dashboard/src/components/dashboards/DashboardTopBar.vue
View file

@ -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.