chore: improve super formatting toolbar positioning

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

@@ -47,7 +47,7 @@ type Options = {
   popoverRect?: DOMRect
   side: PopoverSide
   disableMobileFullscreenTakeover?: boolean
-  maxHeightFunction?: (calculatedMaxHeight: number) => number
+  maxHeightFunction?: (calculatedMaxHeight: number) => number | 'none'
   offset?: number
 }
 

packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts

@@ -0,0 +1,24 @@
+import { getOverflows } from './Collisions'
+
+export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DOMRect) => {
+  const popoverRect = popoverElement.getBoundingClientRect()
+  const x = parseInt(popoverElement.style.getPropertyValue('--translate-x')) || 0
+  const y = parseInt(popoverElement.style.getPropertyValue('--translate-y')) || 0
+  const overflows = getOverflows(popoverRect, rect)
+
+  if (overflows['top'] > 0) {
+    popoverElement.style.setProperty('--translate-y', `${y + overflows['top']}px`)
+  }
+
+  if (overflows['bottom'] > 0) {
+    popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom']}px`)
+  }
+
+  if (overflows['left'] > 0) {
+    popoverElement.style.setProperty('--translate-x', `${x + overflows['left']}px`)
+  }
+
+  if (overflows['right'] > 0) {
+    popoverElement.style.setProperty('--translate-x', `${x - overflows['right']}px`)
+  }
+}