X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e439bc2314ccbc1f315802e3984694aecdd42654..9aefffe7db795c8b4aacfc8c2dbfc2eab17ad363:/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx

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..32f977e1a4 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,16 @@ 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 true, the element is visible
             if (entry.isIntersecting) {
                 updatedEntries[targetid] = true;
             } else {
@@ -57,15 +62,29 @@ 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,
+        }));
     };
 
+    //ensures that the last element is always visible if the second to last is visible
+    useEffect(() => {
+        if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && 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 +102,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 +122,7 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
                     }),
                 });
             })}
-            {numHidden(visibilityMap) >= 2 && (
+            {numHidden >= 2 && (
                 <OverflowMenu
                     visibilityMap={visibilityMap}
                     className={classes.overflowStyle}