From 4deb13e73eb46e9a7c585d7c4992590651299678 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 16 Jun 2026 12:04:56 +0100
Subject: [PATCH] fix(base): keep add-property popover within viewport on
 mobile

Opened from the row detail modal, the create-property popover anchors to the bottom Add property button and flips upward on small screens, clipping its top (name field, formula editor) off-screen with no way to scroll to it.

Bound the dropdown to the available height with the floating-ui size middleware and give it an internal scroll container. Disable react-remove-scroll isolation on the modal so the body-portaled popover can scroll on touch while the modal scroll lock stays active.
---
 .../property/create-property-popover.tsx           | 14 ++++++++++++++
 .../row-detail-modal/row-detail-modal.tsx          |  1 +
 2 files changed, 15 insertions(+)

diff --git a/apps/client/src/ee/base/components/property/create-property-popover.tsx b/apps/client/src/ee/base/components/property/create-property-popover.tsx
index 93d01fb34..9cd4b3717 100644
--- a/apps/client/src/ee/base/components/property/create-property-popover.tsx
+++ b/apps/client/src/ee/base/components/property/create-property-popover.tsx
@@ -51,6 +51,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, r
   // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
   const [dropdownNode, setDropdownNode] = useState<HTMLDivElement | null>(null);
   const nameInputRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const createPropertyMutation = useCreatePropertyMutation();
 
@@ -221,6 +222,17 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, r
         closeOnClickOutside
         closeOnEscape={false}
         withinPortal
+        middlewares={{
+          flip: true,
+          shift: true,
+          size: {
+            padding: 8,
+            apply: ({ availableHeight }) => {
+              const el = scrollRef.current;
+              if (el) el.style.maxHeight = `${availableHeight}px`;
+            },
+          },
+        }}
       >
         <Popover.Target>
           {renderTarget ? (
@@ -248,6 +260,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, r
             maxWidth: "calc(100vw - 32px)",
           }}
         >
+          <div ref={scrollRef} style={{ overflowY: "auto", overflowX: "hidden" }}>
           {panel === "typePicker" && (
             <Stack gap={0} p={4}>
               <ScrollArea.Autosize
@@ -382,6 +395,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, r
               </Group>
             </Stack>
           )}
+          </div>
         </Popover.Dropdown>
       </Popover>
     </>
diff --git a/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx b/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx
index 7187d50ce..7d1cfdce9 100644
--- a/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx
+++ b/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx
@@ -217,6 +217,7 @@ export function RowDetailModal({
       radius="md"
       title={null}
       classNames={{ content: classes.modalContent }}
+      removeScrollProps={{ noIsolation: true }}
     >
       {row ? (
         <>