From 36871ffc981832ac7cf5131e9ac36626c49d3a2b Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curii.com>
Date: Thu, 1 Feb 2024 14:55:47 -0500
Subject: [PATCH] 21440: Densify the rows on the input/output parameters table

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---
 .../details-attribute/details-attribute.tsx   |  4 +--
 .../views/process-panel/process-io-card.tsx   | 25 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/services/workbench2/src/components/details-attribute/details-attribute.tsx b/services/workbench2/src/components/details-attribute/details-attribute.tsx
index 92d31b0b8e..a1b81838ca 100644
--- a/services/workbench2/src/components/details-attribute/details-attribute.tsx
+++ b/services/workbench2/src/components/details-attribute/details-attribute.tsx
@@ -25,7 +25,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     label: {
         boxSizing: 'border-box',
         color: theme.palette.grey["600"],
-        width: '100%'
+        width: '100%',
+        marginTop: "0.4em",
     },
     value: {
         boxSizing: 'border-box',
@@ -132,4 +133,3 @@ export const DetailsAttributeComponent = withStyles(styles)(
                 </Tooltip>}
             </Typography>
         </Typography>);
-
diff --git a/services/workbench2/src/views/process-panel/process-io-card.tsx b/services/workbench2/src/views/process-panel/process-io-card.tsx
index 52efd99087..8c0bdf76ae 100644
--- a/services/workbench2/src/views/process-panel/process-io-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-io-card.tsx
@@ -89,7 +89,8 @@ type CssRules =
     | "symmetricTabs"
     | "imagePlaceholder"
     | "rowWithPreview"
-    | "labelColumn";
+    | "labelColumn"
+    | "primaryRow";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -173,10 +174,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         paddingLeft: "20px",
     },
     secondaryRow: {
-        height: "29px",
+        height: "24px",
         verticalAlign: "top",
         position: "relative",
-        top: "-9px",
+        top: "-4px",
     },
     emptyValue: {
         color: theme.customs.colors.grey700,
@@ -184,7 +185,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     noBorderRow: {
         "& td": {
             borderBottom: "none",
+            paddingTop: "2px",
+            paddingBottom: "2px",
         },
+        height: "24px",
     },
     symmetricTabs: {
         "& button": {
@@ -206,6 +210,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     labelColumn: {
         minWidth: "120px",
     },
+    primaryRow: {
+        height: "24px",
+        "& td": {
+            paddingTop: "2px",
+            paddingBottom: "2px",
+        },
+    },
 });
 
 export enum ProcessIOCardType {
@@ -370,9 +381,9 @@ export const ProcessIOCard = withStyles(styles)(
                                     </Grid>
                                 )}
                                 {/* Once loaded, either raw or params may still be empty
-                            *   Raw when all params are empty
-                            *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
-                            */}
+				  *   Raw when all params are empty
+				  *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
+				  */}
                                 {!loading && (hasRaw || hasParams) && (
                                     <>
                                         <Tabs
@@ -551,6 +562,7 @@ const ProcessIOPreview = memo(
                         const rest = param.value.slice(1);
                         const mainRowClasses = {
                             [classes.noBorderRow]: rest.length > 0,
+                            [classes.primaryRow]: true
                         };
 
                         return (
@@ -577,6 +589,7 @@ const ProcessIOPreview = memo(
                                     const rowClasses = {
                                         [classes.noBorderRow]: i < rest.length - 1,
                                         [classes.secondaryRow]: val.secondary,
+                                        [classes.primaryRow]: !val.secondary,
                                     };
                                     return (
                                         <TableRow
-- 
2.30.2