X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/7aa5e4fe60d4c1f8aeffa48bde44c07104710579..eb5b8638a308f7954f83a6a6659ae97d4f4e082d:/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 7277e98715..6500593166 100644
--- a/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -47,30 +47,30 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: 0,
         height: '2.7rem',
         padding: 0,
-        margin: "1rem auto auto 0.5rem",
+        margin: "1rem auto auto 0.3rem",
         transition: `width ${WIDTH_TRANSITION}ms`,
         overflow: 'hidden',
     },
     transition: {
         display: "flex",
         flexDirection: "row",
-        width: 0,
         height: '2.7rem',
         padding: 0,
-        margin: "1rem auto auto 0.5rem",
+        margin: "1rem auto auto 0.3rem",
         overflow: 'hidden',
         transition: `width ${WIDTH_TRANSITION}ms`,
     },
     button: {
         width: "2.5rem",
         height: "2.5rem ",
-        paddingLeft: 0
+        paddingLeft: 0,
+        border: "1px solid transparent",
     },
     iconContainer: {
         height: '100%',
     },
     icon: {
-        marginLeft: '-0.5rem'
+        marginLeft: '-0.5rem',
     }
 });
 
@@ -122,7 +122,7 @@ export const MultiselectToolbar = connect(
             <React.Fragment>
                 <Toolbar
                     className={isTransitioning ? classes.transition: classes.root}
-                    style={{ width: `${(actions.length * 2.5) + 8}rem` }}
+                    style={{ width: `${(actions.length * 2.5) + 6}rem`}}
                     data-cy='multiselect-toolbar'
                     >
                     {actions.length ? (
@@ -132,11 +132,11 @@ export const MultiselectToolbar = connect(
                             return hasAlts ? (
                                 <Tooltip
                                     className={classes.button}
-                                    title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
                                     data-targetid={name}
+                                    title={currentPathIsTrash || (useAlts && useAlts(singleSelectedUuid, iconProps)) ? altName : name}
                                     key={i}
                                     disableFocusListener
-                                >
+                                    >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'
@@ -151,11 +151,11 @@ export const MultiselectToolbar = connect(
                             ) : (
                                 <Tooltip
                                     className={classes.button}
-                                    title={action.name}
                                     data-targetid={name}
+                                    title={action.name}
                                     key={i}
                                     disableFocusListener
-                                >
+                                    >
                                     <span className={classes.iconContainer}>
                                         <IconButton
                                             data-cy='multiselect-button'
