18219: Improves property chips styling in both 1 or 2 column configurations.

[arvados-workbench2.git] / src / views-components / details-panel / collection-details.tsx

diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 369c93e5379fd754ce3c6c3ef9e04cb1d38a99e8..5edfbc37e1b36354df7fb5c848763f3613e7ec72 100644 (file)
--- 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 />
     )