Fixed molecule view of cross reference dialog

m2ms · Nov 10, 2020 · 165a485 · 165a485
1 parent fb6878b
commit 165a485
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/js/components/datasets/crossReferenceDialog.js b/js/components/datasets/crossReferenceDialog.js
@@ -60,7 +60,8 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     overflowY: 'auto',
-    height: 214
+    height: 214,
+    width: 'fit-content'
   },
   search: {
     margin: theme.spacing(1),

diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js
@@ -161,6 +161,10 @@ const useStyles = makeStyles(theme => ({
   inheritWidth: {
     width: 'inherit'
   },
+  widthOverflow: {
+    maxWidth: '180px',
+    overflow: 'hidden'
+  },
   rank: {
     fontStyle: 'italic',
     fontSize: 7
@@ -553,7 +557,13 @@ export const DatasetMoleculeView = memo(
           </Grid>
           <Grid item container className={classes.detailsCol} justify="space-between" direction="row">
             {/* Title label */}
-            <Grid item xs={!showCrossReferenceModal && hideFButton ? 8 : 7} container direction="column">
+            <Grid
+              item
+              xs={!showCrossReferenceModal && hideFButton ? 8 : 7}
+              container
+              direction="column"
+              className={!showCrossReferenceModal && hideFButton ? classes.widthOverflow : ''}
+            >
               <Grid item className={classes.inheritWidth}>
                 <Tooltip title={moleculeTitle} placement="bottom-start">
                   <div className={classNames(classes.moleculeTitleLabel, isCheckedToBuy && classes.selectedMolecule)}>