Merge pull request #1552 from thehyve/ui-improvement

Improve resizing of metadata buttons on dashboard.
thehyve · Sep 3, 2024 · dc10bbf · dc10bbf
2 parents af01c83 + 5008677
commit dc10bbf
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 16 deletions.
diff --git a/projects/mercury/src/dashboard/DashboardPage.js b/projects/mercury/src/dashboard/DashboardPage.js
@@ -51,8 +51,14 @@ const DashboardPage = props => {
                                 <Typography className={classes.header} variant="h4" paragraph align="center">
                                     Search the metadata
                                 </Typography>
-                                <Grid container spacing={1} direction="row" justifyContent="center">
-                                    <Grid item xs={6} display="flex" justifyContent="center">
+                                <Grid
+                                    container
+                                    spacing={1}
+                                    direction="row"
+                                    justifyContent="center"
+                                    className={classes.domains}
+                                >
+                                    <Grid item xs={6} justifyContent="center">
                                         <DomainInfo
                                             domainName={internalMetadataLabel}
                                             domainLink="/metadata-views"
@@ -61,13 +67,7 @@ const DashboardPage = props => {
                                         />
                                     </Grid>
                                     {externalMetadataSources.map(source => (
-                                        <Grid
-                                            item
-                                            xs={6}
-                                            key={`grid-${source.name}`}
-                                            display="flex"
-                                            justifyContent="center"
-                                        >
+                                        <Grid item xs={6} key={`grid-${source.name}`} justifyContent="center">
                                             <DomainInfo
                                                 domainName={source.label}
                                                 domainLink={'/metadata-sources/' + source.name}

diff --git a/projects/mercury/src/dashboard/DashboardPage.styles.js b/projects/mercury/src/dashboard/DashboardPage.styles.js
@@ -11,6 +11,10 @@ const styles = theme => ({
         padding: '10px 20px 10px 20px',
         height: '100%'
     },
+    domains: {
+        overflowX: 'auto',
+        minWidth: 190
+    },
     link: {
         color: theme.palette.primary.light,
         textDecoration: 'underline'

diff --git a/projects/mercury/src/dashboard/DomainInfo.js b/projects/mercury/src/dashboard/DomainInfo.js
@@ -7,7 +7,7 @@ import styles from './DomainInfo.styles';
 const DomainInfo = props => {
     const {domainName, domainLink, domainIcon, classes} = props;
     return (
-        <div className={classes.outerMargin}>
+        <div className={classes.outerDiv}>
             <Link href={domainLink} className={classes.link}>
                 <Paper className={classes.paper}>
                     <Typography variant="h5" className={classes.domainText}>

diff --git a/projects/mercury/src/dashboard/DomainInfo.styles.js b/projects/mercury/src/dashboard/DomainInfo.styles.js
@@ -1,17 +1,18 @@
 const styles = theme => ({
+    outerDiv: {
+        padding: 10
+    },
     paper: {
-        width: '180px',
-        height: '100px',
+        marginRight: 1,
+        height: 100,
+        minWidth: 90,
         border: 'none',
         background: theme.palette.primary.main,
         '&:hover': {
             backgroundColor: theme.palette.primary.light
         },
         textAlign: 'center'
     },
-    outerMargin: {
-        margin: 10
-    },
     icon: {
         marginLeft: 10,
         marginTop: 10,

diff --git a/projects/mercury/src/metadata/common/values/MarkdownValue.js b/projects/mercury/src/metadata/common/values/MarkdownValue.js
@@ -14,7 +14,11 @@ const MarkdownValue = props => {
                 <BaseInputValue
                     {...props}
                     autoFocus={showEdit && !!props.entry.value}
-                    onBlur={() => setShowEdit(false)}
+                    onBlur={() => {
+                        if (props.entry.value.trim() !== '') {
+                            setShowEdit(false);
+                        }
+                    }}
                     type="text"
                 />
             ) : (