X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/11c207c691729bdc94aa131f332f63969766b20a..4a9e5c926179b3ab8ff7231904e2db93d42149e0:/services/workbench2/src/views-components/details-card/project-details-card.tsx

diff --git a/services/workbench2/src/views-components/details-card/project-details-card.tsx b/services/workbench2/src/views-components/details-card/project-details-card.tsx
index d0aa67a20b..a0f844c510 100644
--- a/services/workbench2/src/views-components/details-card/project-details-card.tsx
+++ b/services/workbench2/src/views-components/details-card/project-details-card.tsx
@@ -36,7 +36,8 @@ type CssRules =
     | 'chipToggle'
     | 'chipSection'
     | 'tag'
-    | 'description';
+    | 'description'
+    | 'toolbarStyles';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -46,9 +47,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         padding: 0,
         minHeight: '3rem',
     },
-    showMore: {
-        cursor: 'pointer',
-    },
     noDescription: {
         color: theme.palette.grey['600'],
         fontStyle: 'italic',
@@ -74,6 +72,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: 'flex',
         flexDirection: 'row',
         cursor: 'pointer',
+        marginTop: '-0.25rem',
         paddingBottom: '0.5rem',
     },
     cardContent: {
@@ -105,21 +104,29 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '1rem',
         color: theme.palette.text.primary,
     },
+    showMore: {
+        marginTop: 0,
+        cursor: 'pointer',
+    },
     chipToggle: {
         display: 'flex',
         alignItems: 'center',
         height: '2rem',
     },
     chipSection: {
-        marginBottom: '-2rem',
+        marginBottom: '-1rem',
     },
     tag: {
         marginRight: '0.75rem',
         marginBottom: '0.5rem',
     },
     description: {
-        maxWidth: '95%',
         marginTop: 0,
+        marginRight: '2rem',
+        marginBottom: '-0.85rem',
+    },
+    toolbarStyles: {
+        marginRight: '-0.5rem',
     },
 });
 
@@ -171,8 +178,6 @@ export const ProjectCard = connect(
             setShowProperties(!showProperties);
         };
 
-        const parser = new DOMParser();
-
         return (
             <Card
                 className={classes.root}
@@ -224,7 +229,7 @@ export const ProjectCard = connect(
                             </section>
                         }
                     />
-                    {isSelected && <MultiselectToolbar />}
+                    {isSelected && <MultiselectToolbar injectedStyles={classes.toolbarStyles} />}
                 </Grid>
                 <section onClick={(ev) => ev.stopPropagation()}>
                     {description ? (
@@ -245,7 +250,7 @@ export const ProjectCard = connect(
                                         data-cy='project-description'
                                         //dangerouslySetInnerHTML is ok here only if description is sanitized,
                                         //which it is before it is loaded into the redux store
-                                        dangerouslySetInnerHTML={{ __html: parser.parseFromString(description, 'text/html').body.textContent || '' }}
+                                        dangerouslySetInnerHTML={{ __html: description }}
                                     />
                                 </Collapse>
                             </section>