mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 21:10:59 +00:00
fix(ui): widen the Sheet close-X hit area to match the Dialog primitive
The Sheet close-X button rendered at the 16 px size of its SVG icon — no min-h / min-w floor — even though the bottom-sheet branch of ResponsiveSheet is the primary dismiss path on phone viewports for quick-add sheets, intake-history trays, and the Coach side trays. The Dialog primitive lifted its close-X to a 36 px floor in MB2 per the WCAG 2.5.8 minimum target rationale; align the Sheet primitive on the same shape so the highest-traffic dismiss control no longer trails the rest of the v1.4.27 tap-target sweep.
This commit is contained in:
1 parent
21a297adf8
commit
7f035958e4
1 file changed
+11
-2
@@ -75,8 +75,17 @@ function SheetContent({
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
// v1.4.27 R4 RC3 — widen the icon-only close-X tap target to
|
||||
// a 36 px floor, matching the Dialog close-X treatment from
|
||||
// MB2 (Decision I). 36 px (not 44 px) is the intentional
|
||||
// exception for fixed icon-only close affordances per the
|
||||
// dialog primitive's rationale: 44 px would crowd the sheet
|
||||
// header out of proportion on the bottom-sheet branch.
|
||||
<SheetPrimitive.Close
|
||||
data-slot="sheet-close-button"
|
||||
className="ring-offset-background focus-visible:border-ring focus-visible:ring-ring/50 text-muted-foreground hover:bg-accent hover:text-foreground absolute top-3 right-4 inline-flex min-h-9 min-w-9 items-center justify-center rounded-md transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user