update(OUT-2100): Dropdowns extend beyond screen content

- [X] created a custom hook that compares the dropdown with viewport and add the styles to show the dropdown inside viewport

Author: SandipBajracharya

src/components/dashboard/settings/sections/product/ProductMappingTable.tsx

@@ -1,6 +1,7 @@
 import { ProductMappingComponentType } from '@/components/dashboard/settings/sections/product/ProductMapping'
 import { ProductMappingItemType } from '@/db/schema/qbProductSync'
 import useClickOutside from '@/hook/useClickOutside'
+import { useDropdownPosition } from '@/hook/useDropdown'
 import {
   ProductDataType,
   useMapItem,
@@ -78,6 +79,8 @@ export default function ProductMappingTable({
     Object.values(buttonRefs.current).map((el) => ({ current: el })), // Exclude the button from outside click detection
   )
 
+  useDropdownPosition(openDropdowns, dropdownRef)
+
   return (
     <>
       <div className="product-mapping-table bg-white border border-gray-200 text-left">

src/hook/useDropdown.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react'
+
+export function useDropdownPosition(
+  openDropdowns: {
+    [key: number]: boolean
+  },
+  dropdownRef: React.RefObject<HTMLElement | null>,
+) {
+  useEffect(() => {
+    Object.entries(openDropdowns).forEach(([index, isOpen]) => {
+      if (isOpen) {
+        const dropdown = dropdownRef.current
+        if (dropdown) {
+          const rect = dropdown.getBoundingClientRect()
+          const buffer = 10 // small padding from edge
+          // Check if it's going off the screen at the bottom
+          if (rect.bottom > window.innerHeight) {
+            dropdown.style.top = 'auto'
+            dropdown.style.bottom = '100%' // position it above
+            dropdown.style.marginTop = '0'
+            dropdown.style.marginBottom = '4px'
+          } else {
+            dropdown.style.top = '100%' // position it below
+            dropdown.style.bottom = 'auto'
+            dropdown.style.marginTop = '4px'
+            dropdown.style.marginBottom = '0'
+          }
+          // Optionally check horizontal overflow too
+          if (rect.right > window.innerWidth - buffer) {
+            dropdown.style.left = 'auto'
+            dropdown.style.right = '0'
+          }
+        }
+      }
+    })
+  }, [openDropdowns])
+}