fix(orchestrator): improve alignment of key-value pairs on the Review…

… step Fixes: FLPATH-1315 Signed-off-by: Marek Libra <[email protected]>
redhat-developer · Dec 2, 2024 · 35bb667 · 35bb667
1 parent ebe6793
commit 35bb667
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/workspaces/orchestrator/.changeset/wicked-spoons-bow.md b/workspaces/orchestrator/.changeset/wicked-spoons-bow.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-react': patch
+---
+
+Fix alignment of key-values on the Review step of the Run Workflow.
diff --git a/workspaces/orchestrator/plugins/orchestrator-form-react/src/components/ReviewStep.tsx b/workspaces/orchestrator/plugins/orchestrator-form-react/src/components/ReviewStep.tsx
@@ -32,6 +32,20 @@ const useStyles = makeStyles(theme => ({
     justifyContent: 'right',
     marginTop: theme.spacing(2),
   },
+  paper: {
+    // Workaround since the StructuredMetadataTable is neither responsive as it simply uses <table> nor can be customized via props or styles.
+    '& > table > tbody > tr': {
+      '& > td:nth-child(1)': {
+        minWidth: '10rem',
+        width: '25%',
+      },
+      '& > td:nth-child(2)': {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'left',
+      },
+    },
+  },
 }));
 
 const ReviewStep = ({
@@ -52,7 +66,7 @@ const ReviewStep = ({
   }, [schema, data]);
   return (
     <Content noPadding>
-      <Paper square elevation={0}>
+      <Paper square elevation={0} className={styles.paper}>
         <StructuredMetadataTable dense metadata={displayData} />
         <Box mb={4} />
         <div className={styles.footer}>