add more fixes to review comments

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Chevron } from './Chevron'
 import Icon from './Icon'
 
@@ -11,9 +11,16 @@ interface SettingsProps {
   addActive: (name: string) => void
   removeActive: () => void
   scrollableRef: React.MutableRefObject<any>
+  onThemeChanged: (themeType: any) => void
 }
 
-function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
+function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [onThemeChanged])
   return (
     <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
       <Chevron

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

@@ -96,7 +96,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
@@ -109,7 +109,7 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
@@ -130,6 +130,7 @@ export function RemixUiVerticalIconsPanel ({
                 removeActive={removeActive}
                 itemContextAction={itemContextAction}
                 scrollableRef={scrollableRef}
+                onThemeChanged={onThemeChanged}
               />
             </Fragment>
           ) : null}