From 4c3a13a90d7c32d85ab5350633b2e12beedd9e52 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Fri, 14 Jan 2022 08:31:19 -0300
Subject: [PATCH] 18219: Improves property chips styling in both 1 or 2 column
 configurations.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 .../details-panel/collection-details.tsx              |  9 +++++++--
 .../details-panel/project-details.tsx                 |  4 ++--
 src/views/collection-panel/collection-panel.tsx       | 11 ++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 369c93e5..5edfbc37 100644
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -22,7 +22,8 @@ export type CssRules = 'versionBrowserHeader'
     | 'versionBrowserItem'
     | 'versionBrowserField'
     | 'editButton'
-    | 'editIcon';
+    | 'editIcon'
+    | 'tag';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     versionBrowserHeader: {
@@ -44,6 +45,10 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         padding: '2px 10px 2px 5px',
         fontSize: '0.75rem'
     },
+    tag: {
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2
+    },
 });
 
 export class CollectionDetails extends DetailsData<CollectionResource> {
@@ -114,7 +119,7 @@ const CollectionInfo = withStyles(styles)(
                         onClick={() => editCollection(currentCollection)}>
                         <RenameIcon className={classes.editIcon} /> Edit
                     </Button>
-                    <CollectionDetailsAttributes twoCol={false} item={currentCollection} />
+                    <CollectionDetailsAttributes classes={classes} twoCol={false} item={currentCollection} />
                 </div>
                 : <div />
     )
diff --git a/src/views-components/details-panel/project-details.tsx b/src/views-components/details-panel/project-details.tsx
index 8ed15b31..d4100767 100644
--- a/src/views-components/details-panel/project-details.tsx
+++ b/src/views-components/details-panel/project-details.tsx
@@ -37,8 +37,8 @@ type CssRules = 'tag' | 'editIcon' | 'editButton';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2,
     },
     editIcon: {
         paddingRight: theme.spacing.unit/2,
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 2c7a8f2c..d513cfb4 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -77,8 +77,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.yellow700
     },
     tag: {
-        marginRight: theme.spacing.unit,
-        marginBottom: theme.spacing.unit
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit / 2
     },
     label: {
         fontSize: '0.875rem'
@@ -333,7 +333,12 @@ export const CollectionDetailsAttributes = (props: CollectionDetailsProps) => {
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Storage classes' value={item.storageClassesDesired.join(', ')} />
         </Grid>
-        <Grid item xs={12} md={mdSize}>
+
+        {/*
+            NOTE: The property list should be kept at the bottom, because it spans
+            the entire available width, without regards of the twoCol prop.
+        */}
+        <Grid item xs={12} md={12}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                 label='Properties' />
             { Object.keys(item.properties).length > 0
-- 
2.30.2