fix: add-offset-to-dropdown-if-out-of-screen (#5753)

Author: Zaimwa9

frontend/common/utils/calculateListPosition.ts

@@ -2,12 +2,21 @@
 export function calculateListPosition(
   btnEl: HTMLElement,
   listEl: HTMLElement,
+  forceInView = false,
 ): { top: number; left: number } {
   const listPosition = listEl.getBoundingClientRect()
   const btnPosition = btnEl.getBoundingClientRect()
   const pageTop = window.visualViewport?.pageTop ?? 0
+  const isOverflowing =
+    listPosition.height + btnPosition.top > window.innerHeight
+
+  const defaultTop = pageTop + btnPosition.bottom
+  const defaultLeft = btnPosition.right - listPosition.width
+
+  const bottomOverflowOffset = listPosition.height + btnPosition.height + 5
+
   return {
-    left: btnPosition.right - listPosition.width,
-    top: pageTop + btnPosition.bottom,
+    left: defaultLeft,
+    top: defaultTop - (forceInView && isOverflowing ? bottomOverflowOffset : 0),
   }
 }

frontend/web/components/FeatureAction.tsx

@@ -44,7 +44,8 @@ export const FeatureAction: FC<FeatureActionProps> = ({
   tags,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
-
+  const [top, setTop] = useState<number>(0)
+  const [left, setLeft] = useState<number>(0)
   const btnRef = useRef<HTMLDivElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
 
@@ -76,9 +77,15 @@ export const FeatureAction: FC<FeatureActionProps> = ({
 
   useLayoutEffect(() => {
     if (!isOpen || !listRef.current || !btnRef.current) return
-    const { left, top } = calculateListPosition(btnRef.current, listRef.current)
+    const { left, top } = calculateListPosition(
+      btnRef.current,
+      listRef.current,
+      true,
+    )
     listRef.current.style.top = `${top}px`
     listRef.current.style.left = `${left}px`
+    setTop(top)
+    setLeft(left)
   }, [isOpen])
 
   const isProtected = !!protectedTags?.length