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.
This commit is contained in:
Philipinho
2026-06-16 12:04:56 +01:00
parent 770c9b9d98
commit 4deb13e73e
2 changed files with 15 additions and 0 deletions
@@ -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>
</>
@@ -217,6 +217,7 @@ export function RowDetailModal({
radius="md"
title={null}
classNames={{ content: classes.modalContent }}
removeScrollProps={{ noIsolation: true }}
>
{row ? (
<>