chore: fix table of contents option on mobile

packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts

@@ -103,6 +103,7 @@ type Options = {
   side: PopoverSide
   disableMobileFullscreenTakeover?: boolean
   disableApplyingMobileWidth?: boolean
+  disableFlip?: boolean
   maxHeightFunction?: (calculatedMaxHeight: number) => number | 'none'
   offset?: number
 }
@@ -115,6 +116,7 @@ export const getPositionedPopoverStyles = ({
   side,
   disableMobileFullscreenTakeover,
   disableApplyingMobileWidth,
+  disableFlip,
   maxHeightFunction,
   offset,
 }: Options): PopoverCSSProperties | null => {
@@ -135,7 +137,7 @@ export const getPositionedPopoverStyles = ({
 
   const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side
   const finalAlignment = getNonCollidingAlignment({
-    finalSide: sideWithLessOverflows,
+    finalSide: disableFlip ? side : sideWithLessOverflows,
     preferredAlignment: align,
     collisions: preferredSideRectCollisions,
     popoverRect,
@@ -145,7 +147,7 @@ export const getPositionedPopoverStyles = ({
   const finalPositionedRect = getPositionedPopoverRect(
     popoverRect,
     anchorRect,
-    sideWithLessOverflows,
+    disableFlip ? side : sideWithLessOverflows,
     finalAlignment,
     offset,
   )
@@ -153,7 +155,7 @@ export const getPositionedPopoverStyles = ({
   let maxHeight = getPopoverMaxHeight(
     getAppRect(),
     anchorRect,
-    sideWithLessOverflows,
+    disableFlip ? side : sideWithLessOverflows,
     finalAlignment,
     disableMobileFullscreenTakeover,
   )
@@ -164,7 +166,7 @@ export const getPositionedPopoverStyles = ({
 
   return getStylesFromRect({
     rect: finalPositionedRect,
-    side: sideWithLessOverflows,
+    side: disableFlip ? side : sideWithLessOverflows,
     align: finalAlignment,
     disableMobileFullscreenTakeover,
     disableApplyingMobileWidth,

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -26,6 +26,7 @@ const PositionedPopoverContent = ({
   togglePopover,
   disableClickOutside,
   disableMobileFullscreenTakeover,
+  disableFlip,
   maxHeight,
   portal = true,
   offset,
@@ -53,7 +54,8 @@ const PositionedPopoverContent = ({
     documentRect,
     popoverRect: popoverRect ?? popoverElement?.getBoundingClientRect(),
     side,
-    disableMobileFullscreenTakeover: disableMobileFullscreenTakeover,
+    disableMobileFullscreenTakeover,
+    disableFlip,
     maxHeightFunction: maxHeight,
     offset,
   })
@@ -140,9 +142,9 @@ const PositionedPopoverContent = ({
       >
         <div
           className={classNames(
-            'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] shadow-main',
+            'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main [backdrop-filter:var(--popover-backdrop-filter)]',
             !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
-            'transition-[transform,opacity] motion-reduce:transition-opacity duration-75 [transform-origin:var(--transform-origin)]',
+            'transition-[transform,opacity] duration-75 [transform-origin:var(--transform-origin)] motion-reduce:transition-opacity',
             styles ? 'scale-100 opacity-100' : 'scale-95 opacity-0',
             className,
           )}

packages/web/src/javascripts/Components/Popover/Types.ts

@@ -43,6 +43,7 @@ type CommonPopoverProps = {
   maxHeight?: (calculatedMaxHeight: number) => number
   togglePopover?: () => void
   disableMobileFullscreenTakeover?: boolean
+  disableFlip?: boolean
   title: string
   portal?: boolean
   offset?: number

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -675,6 +675,7 @@ const ToolbarPlugin = () => {
         align="center"
         className="py-1"
         disableMobileFullscreenTakeover
+        disableFlip
       >
         <div className="mb-1.5 mt-1 px-3 text-sm font-semibold uppercase text-text">Table of Contents</div>
         <LexicalTableOfContents>
@@ -690,14 +691,13 @@ const ToolbarPlugin = () => {
                     key={key}
                     className="overflow-hidden md:py-2"
                     onClick={() => {
-                      setIsTOCOpen(false)
                       editor.getEditorState().read(() => {
                         const domElement = editor.getElementByKey(key)
                         if (!domElement) {
                           return
                         }
-                        const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+                        domElement.scrollIntoView({ block: 'start' })
-                        domElement.scrollIntoView({ behavior: reducedMotion ? 'auto' : 'smooth', block: 'nearest' })
+                        setIsTOCOpen(false)
                       })
                     }}
                   >