From ea9956f21da3f7498bf947f539c6b31fa844fe96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 13 Apr 2026 15:19:56 +0100
Subject: [PATCH] fix: keep iOS popovers below the notch (#282)

## Summary
- add safe-area CSS variables for the viewport top and bottom insets
- apply safe-area-aware collision padding to the shared popover
primitive so iOS overlays stay below the notch
- add a focused regression test for the popover safe-area guard

## Testing
- vendor/bin/pint --dirty --format agent
- php artisan test --compact tests/Feature/PopoverSafeAreaTest.php
---
 resources/css/app.css                  |  2 ++
 resources/js/components/ui/popover.tsx | 30 ++++++++++++++++++++++++++
 tests/Feature/PopoverSafeAreaTest.php  |  9 ++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 tests/Feature/PopoverSafeAreaTest.php

diff --git a/resources/css/app.css b/resources/css/app.css
index 6c48d4a9..93a68b8b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -71,6 +71,8 @@
 }
 
 :root {
+    --safe-area-top: env(safe-area-inset-top, 0px);
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx
index 6d51b6ce..80ce42b3 100644
--- a/resources/js/components/ui/popover.tsx
+++ b/resources/js/components/ui/popover.tsx
@@ -3,6 +3,32 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "@/lib/utils"
 
+function useSafeAreaTopPadding(): number {
+  const [padding, setPadding] = React.useState(8)
+
+  React.useEffect(() => {
+    const updatePadding = () => {
+      const value = Number.parseFloat(
+        getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
+      )
+
+      setPadding(Number.isNaN(value) ? 8 : Math.max(8, value + 8))
+    }
+
+    updatePadding()
+
+    window.addEventListener("resize", updatePadding)
+    window.visualViewport?.addEventListener("resize", updatePadding)
+
+    return () => {
+      window.removeEventListener("resize", updatePadding)
+      window.visualViewport?.removeEventListener("resize", updatePadding)
+    }
+  }, [])
+
+  return padding
+}
+
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
@@ -19,14 +45,18 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  collisionPadding,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  const safeAreaTopPadding = useSafeAreaTopPadding()
+
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding ?? { top: safeAreaTopPadding, right: 8, bottom: 8, left: 8 }}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
diff --git a/tests/Feature/PopoverSafeAreaTest.php b/tests/Feature/PopoverSafeAreaTest.php
new file mode 100644
index 00000000..1fa776ff
--- /dev/null
+++ b/tests/Feature/PopoverSafeAreaTest.php
@@ -0,0 +1,9 @@
+<?php
+
+test('popover content keeps a safe top collision padding', function () {
+    $popover = file_get_contents(resource_path('js/components/ui/popover.tsx'));
+    $css = file_get_contents(resource_path('css/app.css'));
+
+    expect($popover)->toContain('collisionPadding={collisionPadding ?? { top: safeAreaTopPadding, right: 8, bottom: 8, left: 8 }}')
+        ->and($css)->toContain('--safe-area-top: env(safe-area-inset-top, 0px);');
+});