fix tests

[arvados-workbench2.git] / src / components / attribute / attribute.tsx

diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx
index 6d1c3bc37a79d1db36f38b87c52b4cd07cdbe836..319b241d8d226fd7e51bbf59abde4c16629f4e02 100644 (file)
--- a/src/components/attribute/attribute.tsx
+++ b/src/components/attribute/attribute.tsx
@@ -9,7 +9,7 @@ import { ArvadosTheme } from 'src/common/custom-theme';
 
 interface AttributeDataProps {
     label: string;
-    value?: string;
+    value?: string | number;
     link?: string;
 }
 
@@ -26,7 +26,7 @@ class Attribute extends React.Component<AttributeProps> {
         return <Typography component="div" className={classes.attribute}>
                     <Typography component="span" className={classes.label}>{label}</Typography>
                     { this.hasLink() ? (
-                    <a href='{link}' className={classes.link} target='_blank'>{value}</a>
+                        <a href='{link}' className={classes.link} target='_blank'>{value}</a>
                     ) : (
                         <Typography component="span" className={classes.value}>
                             {value}
@@ -42,9 +42,8 @@ type CssRules = 'attribute' | 'label' | 'value' | 'link';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     attribute: {
-        height: '24px',
         display: 'flex',
-        alignItems: 'center',
+        alignItems: 'flex-start',
         marginBottom: theme.spacing.unit
     },
     label: {
@@ -52,12 +51,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: '40%'
     },
     value: {
+        width: '60%',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'flex-start',
+        textTransform: 'capitalize'
     },
     link: {
+        width: '60%',
         color: theme.palette.primary.main,
-        textDecoration: 'none'
+        textDecoration: 'none',
+        overflowWrap: 'break-word'
     }
 });