Prevent item labels in Collection modal from being cut off (#3432)

src/components/CollectionDialog.js

@@ -243,7 +243,11 @@ export class CollectionDialog extends Component {
             <MenuList>
               {
                 collections.map(c => (
-                  <MenuItem key={c.id} onClick={() => { this.selectCollection(c); }}>
+                  <MenuItem
+                    key={c.id}
+                    onClick={() => { this.selectCollection(c); }}
+                    className={classes.collectionItem}
+                  >
                     {CollectionDialog.getUseableLabel(c)}
                   </MenuItem>
                 ))
@@ -254,7 +258,11 @@ export class CollectionDialog extends Component {
             <MenuList>
               {
                 manifest.getManifests().map(m => (
-                  <MenuItem key={m.id} onClick={() => { this.selectManifest(m); }}>
+                  <MenuItem
+                    key={m.id}
+                    onClick={() => { this.selectManifest(m); }}
+                    className={classes.collectionItem}
+                  >
                     {CollectionDialog.getUseableLabel(m)}
                   </MenuItem>
                 ))

src/containers/CollectionDialog.js

@@ -54,6 +54,9 @@ const styles = theme => ({
     padding: '16px',
     paddingTop: 0,
   },
+  collectionItem: {
+    whiteSpace: 'normal',
+  },
   collectionMetadata: {
     padding: '16px',
   },