16073: Shrink secondary row spacing

[arvados-workbench2.git] / src / views / process-panel / process-io-card.tsx

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index b2f36f5238542df5e703b5105f405e1a1cffce55..40790e585dfaff441cdf56ca3951216b31dedc80 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -81,8 +81,9 @@ type CssRules =
   | "imagePreview"
   | "valArray"
   | "secondaryVal"
+  | "secondaryRow"
   | "emptyValue"
-  | "halfRow"
+  | "noBorderRow"
   | "symmetricTabs"
   | "imagePlaceholder"
   | "rowWithPreview"
@@ -166,10 +167,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     secondaryVal: {
         paddingLeft: '20px',
     },
+    secondaryRow: {
+        height: '29px',
+        verticalAlign: 'top',
+        position: 'relative',
+        top: '-9px',
+    },
     emptyValue: {
         color: theme.customs.colors.grey500,
     },
-    halfRow: {
+    noBorderRow: {
         '& td': {
             borderBottom: 'none',
         }
@@ -358,10 +365,12 @@ const ProcessIOPreview = withStyles(styles)(
                 {data.map((param: ProcessIOParameter) => {
                     const firstVal = param.value.length > 0 ? param.value[0] : undefined;
                     const rest = param.value.slice(1);
-                    const rowClass = rest.length > 0 ? classes.halfRow : undefined;
+                    const mainRowClasses = {
+                        [classes.noBorderRow]: (rest.length > 0),
+                    };
 
                     return <>
-                        <TableRow className={rowClass} data-cy="process-io-param">
+                        <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
                             <TableCell>
                                 {param.id}
                             </TableCell>
@@ -375,8 +384,12 @@ const ProcessIOPreview = withStyles(styles)(
                                 </Typography>
                             </TableCell>
                         </TableRow>
-                        {rest.map((val, i) => (
-                            <TableRow className={(i < rest.length-1) ? rowClass : undefined}>
+                        {rest.map((val, i) => {
+                            const rowClasses = {
+                                [classes.noBorderRow]: (i < rest.length-1),
+                                [classes.secondaryRow]: val.secondary,
+                            };
+                            return <TableRow className={classNames(rowClasses)}>
                                 <TableCell />
                                 {showLabel && <TableCell />}
                                 <TableCell>
@@ -388,7 +401,7 @@ const ProcessIOPreview = withStyles(styles)(
                                     </Typography>
                                 </TableCell>
                             </TableRow>
-                        ))}
+                        })}
                     </>;
                 })}
             </TableBody>