diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 540786e4d7..89744d09f9 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -72,6 +72,7 @@ export class CanvasAnnotations extends Component {
           {annotations.map((annotation) => (
             <MenuItem
               component={listContainerComponent}
+              variant="multiline"
               sx={{
                 '&:hover,&:focus': {
                   backgroundColor: 'action.hover',
@@ -80,7 +81,6 @@ export class CanvasAnnotations extends Component {
                 borderBottom: '0.5px solid',
                 borderBottomColor: 'divider',
                 cursor: 'pointer',
-                whiteSpace: 'normal',
               }}
               key={annotation.id}
               annotationid={annotation.id}
diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
index 9e0e889719..07064e832e 100644
--- a/src/components/CollectionDialog.js
+++ b/src/components/CollectionDialog.js
@@ -256,7 +256,7 @@ export class CollectionDialog extends Component {
                   <MenuItem
                     key={c.id}
                     onClick={() => { this.selectCollection(c); }}
-                    sx={{ whiteSpace: 'normal' }}
+                    variant="multiline"
                   >
                     {CollectionDialog.getUseableLabel(c)}
                   </MenuItem>
@@ -271,7 +271,7 @@ export class CollectionDialog extends Component {
                   <MenuItem
                     key={m.id}
                     onClick={() => { this.selectManifest(m); }}
-                    sx={{ whiteSpace: 'normal' }}
+                    variant="multiline"
                   >
                     {CollectionDialog.getUseableLabel(m)}
                   </MenuItem>
diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js
index 7ccaa6b264..526cdc842c 100644
--- a/src/components/WindowSideBarCollectionPanel.js
+++ b/src/components/WindowSideBarCollectionPanel.js
@@ -21,11 +21,11 @@ function Item({
       alignItems="flex-start"
       button
       component="li"
+      variant="multiline"
       sx={{
         borderBottom: '0.5px solid',
         borderBottomColor: 'divider',
         paddingRight: 1,
-        whiteSpace: 'normal',
       }}
       {...otherProps}
     >
diff --git a/src/config/settings.js b/src/config/settings.js
index c7f53e48a7..53798689fa 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -169,6 +169,14 @@ export default {
       useNextVariants: true // set so that console deprecation warning is removed
     },
     components: {
+      MuiMenuItem: {
+        variants: [
+          {
+            props: { variant: 'multiline' },
+            style: { whiteSpace: 'normal' }
+          },
+        ]
+      },
       CompanionWindowSection: {
         styleOverrides: {
           root: {