From 1588dc0858fd6ab05945a4a12472ae1965f9377c Mon Sep 17 00:00:00 2001
From: Wes Weitzel <wesweitzel@gmail.com>
Date: Tue, 12 Dec 2023 20:19:19 -0800
Subject: [PATCH] Fix dropdown flicking up on mobile

---
 src/components/Select.tsx  |  5 +++--
 src/hooks/useWindowSize.ts | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useWindowSize.ts

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 121deb0..f1a1c77 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,12 +1,12 @@
 import 'bootstrap/js/dist/dropdown';
 import {useEffect, useState} from 'react';
 import {usePrevious} from '../hooks/usePrevious';
+import {useWindowSize} from '../hooks/useWindowSize';
 
 interface Option {
   displayName: string;
   key: any;
   value: any;
-  image?: string;
 }
 
 interface SelectProps {
@@ -34,6 +34,7 @@ function Select({
   const [searchText, setSearchText] = useState('');
   const prevSearchText = usePrevious(searchText);
   const [hadFirstInteraction, setHadFirstInteraction] = useState(false);
+  const {isMobile} = useWindowSize();
 
   const dropdownId = `dropdown-${Math.random().toString(36).substring(7)}`;
 
@@ -78,7 +79,7 @@ function Select({
           </button>
           <div
             className="dropdown-menu overflow-auto w-100 pt-0 shadow"
-            style={{maxHeight: '300px'}}
+            style={{maxHeight: isMobile ? '250px' : '300px'}}
             aria-labelledby={dropdownId}
             role="menu"
           >
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
new file mode 100644
index 0000000..cbbbffb
--- /dev/null
+++ b/src/hooks/useWindowSize.ts
@@ -0,0 +1,34 @@
+import {useLayoutEffect, useState} from 'react';
+
+interface WindowSize {
+  width: number;
+  height: number;
+  isMobile: boolean;
+  isDesktop: boolean;
+}
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: 0,
+    height: 0,
+    isMobile: false,
+    isDesktop: false,
+  });
+
+  const handleSize = () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+      isMobile: window.innerWidth < 576,
+      isDesktop: window.innerWidth > 991,
+    });
+  };
+
+  useLayoutEffect(() => {
+    handleSize();
+    window.addEventListener('resize', handleSize);
+    return () => window.removeEventListener('resize', handleSize);
+  }, []);
+
+  return windowSize;
+}