From 1c4ed2d18db38265991a6e2292f3b3d13ad9217e Mon Sep 17 00:00:00 2001
From: Karthik <karthik.jk11@gmail.com>
Date: Fri, 17 Apr 2026 10:21:00 +0530
Subject: [PATCH] fix(orchestrator-form-react): fix ui styling issues in
 workflow results page

---
 workspaces/orchestrator/.changeset/new-books-matter.md   | 5 +++++
 .../orchestrator/plugins/orchestrator/package.json       | 1 +
 .../WorkflowInstancePage/WorkflowDescriptionModal.tsx    | 9 ++++++++-
 .../components/WorkflowInstancePage/WorkflowResult.tsx   | 7 +++----
 .../orchestrator/src/components/ui/TextCodeBlock.tsx     | 5 ++++-
 workspaces/orchestrator/yarn.lock                        | 1 +
 6 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 workspaces/orchestrator/.changeset/new-books-matter.md

diff --git a/workspaces/orchestrator/.changeset/new-books-matter.md b/workspaces/orchestrator/.changeset/new-books-matter.md
new file mode 100644
index 0000000000..dbef34c04d
--- /dev/null
+++ b/workspaces/orchestrator/.changeset/new-books-matter.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Fix UI styling issues in worfkflow results page
diff --git a/workspaces/orchestrator/plugins/orchestrator/package.json b/workspaces/orchestrator/plugins/orchestrator/package.json
index 7e080e7378..eb55e0990d 100644
--- a/workspaces/orchestrator/plugins/orchestrator/package.json
+++ b/workspaces/orchestrator/plugins/orchestrator/package.json
@@ -78,6 +78,7 @@
     "@backstage/plugin-permission-react": "^0.4.39",
     "@backstage/types": "^1.2.2",
     "@material-ui/core": "^4.12.4",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^",
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx
index 1547d02f30..6a42047143 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx
+++ b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx
@@ -118,7 +118,14 @@ export const RefForwardingWorkflowDescriptionModal: ForwardRefRenderFunction<
       fullWidth
     >
       <DialogTitle>
-        <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+            gap: 1,
+          }}
+        >
           <Typography variant="h5">{workflow.name}</Typography>
           <IconButton
             className={classes.closeBtn}
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx
index f524fda4e8..ccf09bd65e 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx
+++ b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx
@@ -25,8 +25,7 @@ import {
 import { RouteFunc, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { AboutField } from '@backstage/plugin-catalog';
 
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
+import { Alert, AlertTitle } from '@material-ui/lab';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -433,7 +432,7 @@ export const WorkflowResult: React.FC<{
         className={className}
         cardClassName={cardClassName}
       >
-        <Divider sx={{ mb: 2 }} />
+        <Divider sx={{ '&&': { mb: 2 } }} />
         {logsEnabled && (
           <>
             <Box sx={{ ml: 2 }}>
@@ -452,7 +451,7 @@ export const WorkflowResult: React.FC<{
                 {t('run.logs.viewLogs')}
               </Button>
             </Box>
-            <Divider sx={{ mt: 2, mb: 2 }} />
+            <Divider sx={{ '&&': { my: 2 } }} />
           </>
         )}
         <Grid container alignContent="flex-start" spacing="1rem">
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx
index 1f0e24473a..6ad7f85b0b 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx
+++ b/workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx
@@ -29,9 +29,12 @@ const useStyles = makeStyles<{ isDarkMode: boolean; maxHeight?: number }>()(
       position: 'relative',
       paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(2),
-      backgroundColor: isDarkMode ? '#151515' : '#F0F0F0',
       maxWidth: 600,
       marginTop: '0.6rem',
+      '&&': {
+        outline: 'unset',
+        backgroundColor: isDarkMode ? '#151515' : '#F0F0F0',
+      },
     },
     iconButton: {
       position: 'absolute',
diff --git a/workspaces/orchestrator/yarn.lock b/workspaces/orchestrator/yarn.lock
index a4da8a29fe..610a20c56c 100644
--- a/workspaces/orchestrator/yarn.lock
+++ b/workspaces/orchestrator/yarn.lock
@@ -12679,6 +12679,7 @@ __metadata:
     "@backstage/ui": "npm:^0.11.2"
     "@janus-idp/cli": "npm:3.7.0"
     "@material-ui/core": "npm:^4.12.4"
+    "@material-ui/lab": "npm:^4.0.0-alpha.61"
     "@mui/icons-material": "npm:^5.17.1"
     "@mui/material": "npm:^5.17.1"
     "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^"