From e4c2d705e8d418b24ab8269f47eafeae95af5c9c Mon Sep 17 00:00:00 2001 From: Alois Date: Tue, 11 Aug 2026 20:36:07 +0200 Subject: [PATCH] feat(mobile): add safe area padding --- apps/showcase/index.html | 5 ++++- package.json | 2 +- src/cmp/alert-dialog.tsx | 2 +- src/cmp/combobox.tsx | 12 ++++++++++- src/cmp/command.tsx | 2 +- src/cmp/context-menu.tsx | 7 ++++++- src/cmp/dialog.tsx | 2 +- src/cmp/drawer.tsx | 2 +- src/cmp/dropdown-menu.tsx | 7 ++++++- src/cmp/hover-card.tsx | 7 ++++++- src/cmp/navigation-menu.tsx | 5 +++++ src/cmp/onboarding-flow.tsx | 2 +- src/cmp/popover.tsx | 7 ++++++- src/cmp/select.tsx | 12 ++++++++++- src/cmp/sheet.tsx | 4 ++-- src/cmp/sidebar.tsx | 4 ++-- src/cmp/sonner.tsx | 12 +++++++++++ src/cmp/tooltip.tsx | 7 ++++++- src/hooks/use-safe-area.ts | 40 +++++++++++++++++++++++++++++++++++++ src/index.css | 4 ++++ src/index.ts | 1 + src/screens/util.tsx | 8 +++----- 22 files changed, 131 insertions(+), 23 deletions(-) create mode 100644 src/hooks/use-safe-area.ts diff --git a/apps/showcase/index.html b/apps/showcase/index.html index 0226942..e03a0c5 100644 --- a/apps/showcase/index.html +++ b/apps/showcase/index.html @@ -2,7 +2,10 @@ - + Methanium UI Showcase diff --git a/package.json b/package.json index 8779d0d..1e336be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@methanium/ui", - "version": "0.0.28", + "version": "0.0.29", "type": "module", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/src/cmp/alert-dialog.tsx b/src/cmp/alert-dialog.tsx index a0a9c26..848b7a9 100644 --- a/src/cmp/alert-dialog.tsx +++ b/src/cmp/alert-dialog.tsx @@ -52,7 +52,7 @@ function AlertDialogContent({ data-slot="alert-dialog-content" data-size={size} className={cn( - "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", + "group/alert-dialog-content fixed top-[calc((100dvh+max(1rem,var(--ui-safe-area-top))-max(1rem,var(--ui-safe-area-bottom)))/2)] left-[calc((100%+max(1rem,var(--ui-safe-area-left))-max(1rem,var(--ui-safe-area-right)))/2)] z-50 grid w-[calc(100%-max(1rem,var(--ui-safe-area-left))-max(1rem,var(--ui-safe-area-right)))] max-h-[calc(100dvh-max(1rem,var(--ui-safe-area-top))-max(1rem,var(--ui-safe-area-bottom)))] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className, )} {...props} diff --git a/src/cmp/combobox.tsx b/src/cmp/combobox.tsx index dddb01f..755cc5d 100644 --- a/src/cmp/combobox.tsx +++ b/src/cmp/combobox.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Combobox as ComboboxPrimitive } from "@base-ui/react"; import { cn } from "../lib/utils"; +import { useSafeAreaCollisionPadding } from "../hooks/use-safe-area"; import { Button } from "./button"; import { InputGroup, @@ -89,12 +90,20 @@ function ComboboxContent({ align = "start", alignOffset = 0, anchor, + collisionPadding, ...props }: ComboboxPrimitive.Popup.Props & Pick< ComboboxPrimitive.Positioner.Props, - "side" | "align" | "sideOffset" | "alignOffset" | "anchor" + | "side" + | "align" + | "sideOffset" + | "alignOffset" + | "anchor" + | "collisionPadding" >) { + const safeAreaCollisionPadding = useSafeAreaCollisionPadding(); + return ( ) { + const safeAreaCollisionPadding = useSafeAreaCollisionPadding(); + return ( ) { + const safeAreaCollisionPadding = useSafeAreaCollisionPadding(); + return ( ; @@ -20,12 +21,15 @@ function HoverCardContent({ sideOffset = 4, align = "center", alignOffset = 4, + collisionPadding, ...props }: PreviewCardPrimitive.Popup.Props & Pick< PreviewCardPrimitive.Positioner.Props, - "align" | "alignOffset" | "side" | "sideOffset" + "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" >) { + const safeAreaCollisionPadding = useSafeAreaCollisionPadding(); + return ( -