From 299c20e6816fef465dd1a29ec4787ba7763a9285 Mon Sep 17 00:00:00 2001
From: Stephen Smith <stephen@curii.com>
Date: Mon, 17 Oct 2022 21:47:49 -0400
Subject: [PATCH] 16073: Shrink secondary row spacing

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---
 src/views/process-panel/process-io-card.tsx | 27 +++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index b2f36f52..40790e58 100644
--- 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>
-- 
2.30.2