Pull sidebar index styles up

src/components/SidebarIndexItem.js

@@ -12,7 +12,6 @@ export class SidebarIndexItem extends Component {
 
     return (
       <Typography
-        sx={{ paddingLeft: 1 }}
         variant="body1"
       >
         {label}

src/components/SidebarIndexList.js

@@ -2,11 +2,20 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
 import { ScrollTo } from './ScrollTo';
 import MiradorCanvas from '../lib/MiradorCanvas';
 import SidebarIndexItem from '../containers/SidebarIndexItem';
 import SidebarIndexThumbnail from '../containers/SidebarIndexThumbnail';
 
+const StyledItem = styled(MenuItem, { name: 'SidebarIndexList', slot: 'item' })(({ theme }) => ({
+  alignItems: 'flex-start',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(1),
+  position: 'initial',
+  whiteSpace: 'normal',
+}));
+
 /** */
 export class SidebarIndexList extends Component {
   /** @private */
@@ -55,21 +64,14 @@ export class SidebarIndexList extends Component {
                 selected={selectedCanvasIds.includes(canvas.id)}
                 scrollTo={selectedCanvasIds.includes(canvas.id)}
               >
-                <MenuItem
+                <StyledItem
                   key={canvas.id}
-                  disableGutters
-                  sx={{
-                    paddingLeft: 2,
-                    paddingRight: 1,
-                    position: 'initial',
-                    whiteSpace: 'normal',
-                  }}
                   divider
                   onClick={onClick}
                   component="li"
                 >
                   <Item label={canvas.label} canvas={canvases[canvasIndex]} />
-                </MenuItem>
+                </StyledItem>
               </ScrollTo>
             );
           })

src/components/SidebarIndexThumbnail.js

@@ -21,10 +21,7 @@ export class SidebarIndexThumbnail extends Component {
             maxWidth={width}
           />
         </div>
-        <Typography
-          sx={{ paddingLeft: 1 }}
-          variant="body1"
-        >
+        <Typography>
           {label}
         </Typography>
       </>