From 6b9ba1b76b56f2494d6ddbbf8d2f72d0b872fe09 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Thu, 11 Jan 2024 12:01:09 -0500
Subject: [PATCH] 21317: overflow now accounts for dynamic menu length
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../components/multiselect-toolbar/MultiselectToolbar.tsx  | 2 +-
 .../multiselect-toolbar/ms-toolbar-overflow-menu.tsx       | 2 +-
 .../multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx    | 7 +++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 375b7212f6..992fe24d00 100644
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -126,7 +126,7 @@ export const MultiselectToolbar = connect(
                     data-cy='multiselect-toolbar'
                     >
                     {actions.length ? (
-                        <IntersectionObserverWrapper>
+                        <IntersectionObserverWrapper length={ actions.length }>
                             {actions.map((action, i) =>{
                                 const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
                             return hasAlts ? (
diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
index a0ba5cee98..9f8ced940d 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-menu.tsx
@@ -28,7 +28,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         },
         marginTop: 0,
         paddingTop: 0,
-        paddingLeft: '0.85rem',
+        paddingLeft: '1rem',
         height: '2.5rem',
     },
     menuElement: {
diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index de1acf1eea..3d8cf2f453 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -37,10 +37,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 type WrapperProps = {
     children: OverflowChild[];
+    length: number;
 };
 
 export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperProps & WithStyles<CssRules>) => {
-    const { classes, children } = props;
+    const { classes, children, length } = props;
 
     const navRef = useRef<any>(null);
     const [visibilityMap, setVisibilityMap] = useState({});
@@ -61,7 +62,9 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
             ...updatedEntries,
         }));
     };
+
     useEffect((): any => {
+        setVisibilityMap({})
         const observer = new IntersectionObserver(handleIntersection, {
             root: navRef.current,
             rootMargin: '0px -20px 0px 0px',
@@ -79,7 +82,7 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         return () => {
             observer.disconnect();
         };
-    }, []);
+    }, [length]);
 
     return (
         <div
-- 
2.39.5