fix: popover positioning on mobile

standardnotes · Dec 22, 2023 · 292c96b · 292c96b
1 parent 0656e71
commit 292c96b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -33,6 +33,7 @@ const PositionedPopoverContent = ({
   hideOnClickInModal = false,
   setAnimationElement,
   containerClassName,
+  documentElement,
 }: PopoverContentProps) => {
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const popoverRect = useAutoElementRect(popoverElement)
@@ -45,13 +46,13 @@ const PositionedPopoverContent = ({
     y: anchorPoint?.y,
   })
   const anchorRect = anchorPoint ? anchorPointRect : anchorElementRect
-  const documentRect = useDocumentRect()
+  const _documentRect = useDocumentRect()
   const isDesktopScreen = useMediaQuery(MediaQueryBreakpoints.md)
 
   const styles = getPositionedPopoverStyles({
     align,
     anchorRect,
-    documentRect,
+    documentRect: documentElement?.getBoundingClientRect() ?? _documentRect,
     popoverRect: popoverRect ?? popoverElement?.getBoundingClientRect(),
     side,
     disableMobileFullscreenTakeover,
@@ -73,7 +74,7 @@ const PositionedPopoverContent = ({
   let adjustedStyles: PopoverCSSProperties | undefined = undefined
 
   if (!portal && popoverElement && styles) {
-    adjustedStyles = getAdjustedStylesForNonPortalPopover(popoverElement, styles)
+    adjustedStyles = getAdjustedStylesForNonPortalPopover(popoverElement, styles, documentElement)
   }
 
   usePopoverCloseOnClickOutside({

diff --git a/packages/web/src/javascripts/Components/Popover/Types.ts b/packages/web/src/javascripts/Components/Popover/Types.ts
@@ -50,6 +50,7 @@ type CommonPopoverProps = {
   offset?: number
   hideOnClickInModal?: boolean
   open: boolean
+  documentElement?: HTMLElement
 }
 
 export type PopoverContentProps = CommonPopoverProps & {

diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -583,6 +583,8 @@ const ToolbarPlugin = () => {
     toolbarStore,
   ])
 
+  const popoverDocumentElement = editor.getRootElement()?.parentElement ?? document.body
+
   return (
     <>
       {modal}
@@ -758,6 +760,7 @@ const ToolbarPlugin = () => {
         disableMobileFullscreenTakeover
         disableFlip
         portal={false}
+        documentElement={isMobile ? popoverDocumentElement : undefined}
       >
         <div className="mb-1.5 mt-1 px-3 text-sm font-semibold uppercase text-text">Table of Contents</div>
         <LexicalTableOfContents>
@@ -813,6 +816,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
+        documentElement={isMobile ? popoverDocumentElement : undefined}
       >
         <Menu a11yLabel="Text formatting options" className="!px-0" onClick={() => setIsTextFormatMenuOpen(false)}>
           <ToolbarMenuItem
@@ -853,6 +857,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
+        documentElement={isMobile ? popoverDocumentElement : undefined}
       >
         <Menu a11yLabel="Text style" className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
           <ToolbarMenuItem
@@ -925,6 +930,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
+        documentElement={isMobile ? popoverDocumentElement : undefined}
       >
         <Menu a11yLabel="Alignment" className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
           <ToolbarMenuItem
@@ -965,6 +971,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
+        documentElement={isMobile ? popoverDocumentElement : undefined}
       >
         <Menu a11yLabel="Insert" className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
           <ToolbarMenuItem