diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js index 564546285754100924d45e2885180c56d10939f2..baa41c951c26e1fea9571e3a0afe6e3b04b34ca6 100644 --- a/src/components/WindowSideBarCollectionPanel.js +++ b/src/components/WindowSideBarCollectionPanel.js @@ -4,6 +4,8 @@ import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; +import MenuList from '@material-ui/core/MenuList'; +import MenuItem from '@material-ui/core/MenuItem'; import Typography from '@material-ui/core/Typography'; import Skeleton from '@material-ui/lab/Skeleton'; import ArrowUpwardIcon from '@material-ui/icons/ArrowUpwardSharp'; @@ -54,8 +56,8 @@ export class WindowSideBarCollectionPanel extends Component { /** */ const Item = ({ manifest, ...otherProps }) => ( - <ListItem - className={classes.listItem} + <MenuItem + className={classes.menuItem} alignItems="flex-start" button component="li" @@ -72,7 +74,7 @@ export class WindowSideBarCollectionPanel extends Component { </ListItemIcon> )} <ListItemText>{WindowSideBarCollectionPanel.getUseableLabel(manifest)}</ListItemText> - </ListItem> + </MenuItem> ); return ( @@ -106,15 +108,15 @@ export class WindowSideBarCollectionPanel extends Component { </> )} > - <List> + <MenuList> { isFetching && ( - <ListItem> + <MenuItem> <ListItemText> <Skeleton className={classes.placeholder} variant="text" /> <Skeleton className={classes.placeholder} variant="text" /> <Skeleton className={classes.placeholder} variant="text" /> </ListItemText> - </ListItem> + </MenuItem> )} { collection && collection.getCollections().map((manifest) => { @@ -144,7 +146,7 @@ export class WindowSideBarCollectionPanel extends Component { ); }) } - </List> + </MenuList> </CompanionWindow> ); } diff --git a/src/containers/WindowSideBarCollectionPanel.js b/src/containers/WindowSideBarCollectionPanel.js index 4f68f0e38f8dffda79755135f06361f45e2e0cb9..32b31a77b283f90756a568cffe44be7282f31d5b 100644 --- a/src/containers/WindowSideBarCollectionPanel.js +++ b/src/containers/WindowSideBarCollectionPanel.js @@ -63,9 +63,10 @@ const styles = theme => ({ label: { paddingLeft: theme.spacing(1), }, - listItem: { + menuItem: { borderBottom: `0.5px solid ${theme.palette.divider}`, paddingRight: theme.spacing(1), + whiteSpace: 'normal', }, });