From 3f529aa6cf08deeb7b564b47bc354eb675869a5a Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Tue, 18 Jan 2022 19:08:24 +0100
Subject: [PATCH] fix scrolling

---
 .../src/lib/reducers/verticalScrollReducer.ts |  2 ++
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 36 ++++++++++++-------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
index 9987b3a369..5f5392389a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
@@ -9,6 +9,8 @@ export function verticalScrollReducer (prevState: any, actionPayload: actionType
     const { scrollHeight, clientHeight } = actionPayload.payload
     let { scrollState } = actionPayload.payload
     if (scrollHeight > clientHeight) scrollState = true
+    console.log(scrollHeight, clientHeight)
+    console.log(scrollState)
     return { scrollHeight, clientHeight, scrollState }
   }
   return prevState
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 969e69a773..6d606d3149 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -30,22 +30,32 @@ const RemixUiVerticalIconsPanel = ({
   const iconPanelRef = useRef<any>()
   const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
   const [theme, setTheme] = useState<string>('dark')
+
+
+
+  const evaluateScrollability = () => {
+    dispatchScrollAction({
+      type: 'resize',
+      payload: {
+        scrollHeight: scrollableRef.current?.scrollHeight,
+        clientHeight: scrollableRef.current?.clientHeight,
+        scrollState: false
+      }
+    })
+  }
+  
   useEffect(() => {
-    const evaluateScrollability = (evt: any) => {
-      dispatchScrollAction({
-        type: 'resize',
-        payload: {
-          scrollHeight: scrollableRef.current?.scrollHeight,
-          clientHeight: scrollableRef.current?.clientHeight,
-          scrollState: false
-        }
-      })
-    }
-    addEventListener('resize', evaluateScrollability)
+    window.addEventListener('resize', evaluateScrollability)
+    evaluateScrollability()
     return () => {
-      removeEventListener('resize', evaluateScrollability)
+      window.removeEventListener('resize', evaluateScrollability)
     }
-  })
+  }, [])
+
+  useEffect(() => {
+    evaluateScrollability()
+  },[icons, theme])
+
   useEffect(() => {
     verticalIconsPlugin.call('theme', 'currentTheme').then((th: any) => {
       setTheme(th.quality)