From 976db4132cdb68bddb5a185d74a053355f91e549 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisaknox83@gmail.com>
Date: Wed, 24 Jan 2024 11:19:08 -0500
Subject: [PATCH] 21317: overflow now toggles on and off at the same pixel
 Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

---
 .../MultiselectToolbar.tsx                    |  4 +-
 .../ms-toolbar-overflow-wrapper.tsx           | 45 +++++++++++++------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index a4092b79ab..d861dff3ad 100644
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -47,7 +47,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: 0,
         height: '2.7rem',
         padding: 0,
-        paddingRight: '-1rem',
         margin: "1rem auto auto 0.5rem",
         transition: `width ${WIDTH_TRANSITION}ms`,
         overflow: 'hidden',
@@ -55,7 +54,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     transition: {
         display: "flex",
         flexDirection: "row",
-        width: 0,
         height: '2.7rem',
         padding: 0,
         margin: "1rem auto auto 0.5rem",
@@ -123,7 +121,7 @@ export const MultiselectToolbar = connect(
             <React.Fragment>
                 <Toolbar
                     className={isTransitioning ? classes.transition: classes.root}
-                    style={{ width: `${(actions.length * 2.5) + 5}rem` }}
+                    style={{ width: `${(actions.length * 2.5) + 4}rem`}}
                     data-cy='multiselect-toolbar'
                     >
                     {actions.length ? (
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 645536c104..d50d1f3f28 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
@@ -24,13 +24,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     toolbarWrapper: {
         display: 'flex',
         overflow: 'hidden',
-        padding: '0 20px',
+        padding: '0 0px 0 20px',
         width: '100%',
     },
     overflowStyle: {
         order: 99,
         position: 'sticky',
         right: '-2rem',
+        width: 0,
     },
 });
 
@@ -43,12 +44,15 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
     const { classes, children, menuLength } = props;
     const lastEntryId = (children[menuLength - 1] as any).props['data-targetid'];
     const navRef = useRef<any>(null);
-    const [visibilityMap, setVisibilityMap] = useState({});
+    const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
+    const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
+
+    const prevNumHidden = useRef(numHidden);
 
     const handleIntersection = (entries) => {
-        const updatedEntries = {};
+        const updatedEntries: Record<string, boolean> = {};
         entries.forEach((entry) => {
-            const targetid = entry.target.dataset.targetid;
+            const targetid = entry.target.dataset.targetid as string;
             if (entry.isIntersecting) {
                 updatedEntries[targetid] = true;
             } else {
@@ -57,15 +61,28 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         });
 
         setVisibilityMap((prev) => ({
-                ...prev,
-                ...updatedEntries,
-                [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
-            })
-        );
+            ...prev,
+            ...updatedEntries,
+            [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
+        }));
     };
 
+    useEffect(() => {
+        if (prevNumHidden.current === 2 && numHidden === 1) {
+            setVisibilityMap((prev) => ({
+                ...prev,
+                [lastEntryId]: true,
+            }));
+        }
+        prevNumHidden.current = numHidden;
+    }, [numHidden, lastEntryId]);
+
+    useEffect(() => {
+        setNumHidden(findNumHidden(visibilityMap));
+    }, [visibilityMap]);
+
     useEffect((): any => {
-        setVisibilityMap({})
+        setVisibilityMap({});
         const observer = new IntersectionObserver(handleIntersection, {
             root: navRef.current,
             rootMargin: '0px -30px 0px 0px',
@@ -83,12 +100,12 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         return () => {
             observer.disconnect();
         };
-        // eslint-disable-next-line 
+        // eslint-disable-next-line
     }, [menuLength]);
 
-    const numHidden = (visMap: {}) => {
+    function findNumHidden(visMap: {}) {
         return Object.values(visMap).filter((x) => x === false).length;
-    };
+    }
 
     return (
         <div
@@ -103,7 +120,7 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
                     }),
                 });
             })}
-            {numHidden(visibilityMap) >= 2 && (
+            {numHidden >= 2 && (
                 <OverflowMenu
                     visibilityMap={visibilityMap}
                     className={classes.overflowStyle}
-- 
2.30.2