Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
24 lines
760 B
CSS
24 lines
760 B
CSS
/*
|
||
Enlarge the target without enlarging the drawing.
|
||
|
||
In a dense table, a 70×20 px link is visually right and wrong for a finger: the
|
||
recommendation is 44 px and there are six controls here between 14 and 20 px tall
|
||
(a zone name, the sortable header, a user's link). Actually enlarging them would
|
||
break the table, which is what this console does best.
|
||
|
||
`.hitArea` extends the HIT AREA with an invisible pseudo-element, without moving a
|
||
single pixel of what is seen. The control still measures 20 px and is clicked as
|
||
if it measured 36.
|
||
*/
|
||
.hitArea {
|
||
position: relative;
|
||
}
|
||
|
||
.hitArea::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -8px -6px;
|
||
/* It only widens the target: it must not cover whatever sits beside it. */
|
||
z-index: var(--layer-hit);
|
||
}
|