[ARVADOS-WORKBENCH2] created: 2.3.0-134-g4c3a13a9

[Git user]

        at  4c3a13a90d7c32d85ab5350633b2e12beedd9e52 (commit)


commit 4c3a13a90d7c32d85ab5350633b2e12beedd9e52
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date:   Fri Jan 14 08:31:19 2022 -0300

    18219: Improves property chips styling in both 1 or 2 column configurations.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>

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

-----------------------------------------------------------------------


hooks/post-receive
--