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',
}
});
<React.Fragment>
<Toolbar
className={isTransitioning ? classes.transition: classes.root}
- style={{ width: `${(actions.length * 2.5) + 6}rem` }}
+ style={{ width: `${(actions.length * 2.5) + 6}rem`}}
data-cy='multiselect-toolbar'
>
{actions.length ? (
- <IntersectionObserverWrapper>
+ <IntersectionObserverWrapper menuLength={actions.length}>
{actions.map((action, i) =>{
const { hasAlts, useAlts, name, altName, icon, altIcon } = action;
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'
) : (
<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'