refactor chevron to its own component to address buggy behaviour

libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable no-use-before-define */
+import React, { MutableRefObject } from 'react'
+
+export interface ChevronProps {
+    divElementRef: MutableRefObject<any>
+    cssRule: string
+}
+
+function Chevron (props: ChevronProps) {
+  return (
+    <>
+      { props.divElementRef.current && props.divElementRef.current.scrollHeight > props.divElementRef.current.clientHeight
+        ? <i className={props.cssRule}></i> : null }
+    </>
+  )
+}
+
+export { Chevron }

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -83,7 +83,7 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    max-height: 570px;
+    height: 540px;
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
@@ -100,7 +100,12 @@
   }
 
   .remixui_settings {
-    min-height: 30px;
+    height: 30px;
+  }
+
+  .remixui_requiredSection {
+    min-height: 180px;
+    max-height: 330px;
   }
 
   #menuitems {

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -14,6 +14,7 @@ import { VerticalIcons } from '../../types/vertical-icons-panel'
 import Home from './components/Home'
 import Icon from './components/Icon'
 import Settings from './components/Settings'
+import { Chevron } from './components/Chevron'
 export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: VerticalIcons
 }
@@ -90,7 +91,7 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
+    // const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
     if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
       const doWalkThroughEvent = new Event('doWalkThrough')
       document.dispatchEvent(doWalkThroughEvent)
@@ -100,7 +101,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className="remixui_default-icons-container">
+        <div className="remixui_default-icons-container remixui_requiredSection">
           <Home verticalIconPlugin={verticalIconsPlugin} />
           {verticalIconsPlugin.targetProfileForChange &&
           Object.keys(verticalIconsPlugin.targetProfileForChange).length
@@ -309,10 +310,10 @@ export function RemixUiVerticalIconsPanel ({
                 }
               />
             ))}
-          {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          <Chevron
-            ? <i className="fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
+            divElementRef={scrollableRef}
-            : null
+            cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
-          }
+          />
         </div>
         <div
           id="remixuiScrollable"
@@ -361,10 +362,10 @@ export function RemixUiVerticalIconsPanel ({
           Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
             <Fragment>
               <Settings>
-                {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+                <Chevron
-                  ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
+                  divElementRef={scrollableRef}
-                  : null
+                  cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
-                }
+                />
                 {Object.keys(verticalIconsPlugin.targetProfileForChange)
                   .filter(p => p === 'settings')
                   .map(p => (