mirror of
https://github.com/docmost/docmost.git
synced 2026-06-22 09:01:37 +10:00
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:
@@ -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 ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user