feat: responsive popovers & menus (#1323)

packages/web/src/javascripts/Utils/CalculateSubmenuStyle.tsx

@@ -1,64 +0,0 @@
-import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
-
-export type SubmenuStyle = {
-  top?: number | 'auto'
-  right?: number | 'auto'
-  bottom: number | 'auto'
-  left?: number | 'auto'
-  visibility?: 'hidden' | 'visible'
-  maxHeight: number | 'auto'
-}
-
-export const calculateSubmenuStyle = (
-  button: HTMLButtonElement | null,
-  menu?: HTMLDivElement | HTMLMenuElement | null,
-): SubmenuStyle | undefined => {
-  const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
-  const maxChangeEditorMenuSize = parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER
-  const { clientWidth, clientHeight } = document.documentElement
-  const buttonRect = button?.getBoundingClientRect()
-  const buttonParentRect = button?.parentElement?.getBoundingClientRect()
-  const menuBoundingRect = menu?.getBoundingClientRect()
-  const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-  const footerHeightInPx = footerElementRect?.height ?? 0
-
-  let position: SubmenuStyle = {
-    bottom: 'auto',
-    maxHeight: 'auto',
-  }
-
-  if (buttonRect && buttonParentRect) {
-    let positionBottom = clientHeight - buttonRect.bottom - buttonRect.height / 2
-
-    if (positionBottom < footerHeightInPx) {
-      positionBottom = footerHeightInPx + MENU_MARGIN_FROM_APP_BORDER
-    }
-
-    position = {
-      bottom: positionBottom,
-      visibility: 'hidden',
-      maxHeight: 'auto',
-    }
-
-    if (buttonRect.right + maxChangeEditorMenuSize > clientWidth) {
-      position.right = clientWidth - buttonRect.left
-    } else {
-      position.left = buttonRect.right
-    }
-  }
-
-  if (menuBoundingRect?.height && buttonRect && position.bottom !== 'auto') {
-    position.visibility = 'visible'
-
-    if (menuBoundingRect.y < MENU_MARGIN_FROM_APP_BORDER) {
-      position.bottom = position.bottom + menuBoundingRect.y - MENU_MARGIN_FROM_APP_BORDER * 2
-    }
-
-    if (footerElementRect && menuBoundingRect.height > footerElementRect.y) {
-      position.bottom = footerElementRect.height + MENU_MARGIN_FROM_APP_BORDER
-      position.maxHeight = clientHeight - footerElementRect.height - MENU_MARGIN_FROM_APP_BORDER * 2
-    }
-  }
-
-  return position
-}

packages/web/src/javascripts/Utils/index.ts

@@ -1,4 +1,3 @@
-export * from './CalculateSubmenuStyle'
 export * from './ConcatenateUint8Arrays'
 export * from './IsMobile'
 export * from './StringUtils'