From defb597764f730bddb083e460e2353c22b8c1bdf Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Tue, 1 Sep 2026 15:00:06 +0100
Subject: [PATCH 1/3] Hardcode column widths in unified page

This prevents the column widths changing when different components in
the two columns are displayed based on choosing different templates toc
configure.
---
 frontend/unified/src/App.tsx | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index 191ccfb..c679181 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import { SessionSelector } from "./components/SessionSelector";
 import { ScanSelector } from "./components/ScanSelector";
 
@@ -14,8 +14,16 @@ import {
   apolloClientWorkflows,
 } from "../../src/ApolloClient";
 
-const VERTICAL_SPACING = 2;
-const HORIZONTAL_SPACING = 2;
+const VERTICAL_SPACING = 5;
+const HORIZONTAL_SPACING = 20;
+
+const VERTICAL_STACK_CONTAINER_STYLING = {
+  display: "flex",
+  flexDirection: "column",
+  gap: VERTICAL_SPACING,
+  width: "500px",
+  alignItems: "start",
+};
 
 const BEAMLINE_TECHNIQUES_SUBSET = {
   [Beamline.I12]: [Technique.Tomo],
@@ -89,8 +97,15 @@ export const App: React.FC = () => {
         <SessionSelector />
       </ApolloProvider>
       <ApolloProvider client={apolloClientWorkflows}>
-        <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
-          <Stack spacing={VERTICAL_SPACING}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: HORIZONTAL_SPACING,
+          }}
+        >
+          <div style={VERTICAL_STACK_CONTAINER_STYLING}>
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Scan</Typography>
             <ScanSelector />
@@ -135,8 +150,8 @@ export const App: React.FC = () => {
                 Technique[technique as keyof typeof Technique]
               )}
             />
-          </Stack>
-          <Stack spacing={VERTICAL_SPACING}>
+          </div>
+          <div style={VERTICAL_STACK_CONTAINER_STYLING}>
             <Typography variant="h5">Plot</Typography>
 
             <PlaceholderComponent
@@ -159,8 +174,8 @@ export const App: React.FC = () => {
               height={200}
               width={500}
             />
-          </Stack>
-        </Grid>
+          </div>
+        </div>
       </ApolloProvider>
     </>
   );

From 56775ed3da4f312a023bc31de7a3397f5687e362 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Tue, 1 Sep 2026 15:02:40 +0100
Subject: [PATCH 2/3] Remove horizontal margin around pipeline config card

---
 .../ParameterConfiguration/TomoParameterConfiguration.tsx       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/unified/src/components/ParameterConfiguration/TomoParameterConfiguration.tsx b/frontend/unified/src/components/ParameterConfiguration/TomoParameterConfiguration.tsx
index 38c3889..0cd0bda 100644
--- a/frontend/unified/src/components/ParameterConfiguration/TomoParameterConfiguration.tsx
+++ b/frontend/unified/src/components/ParameterConfiguration/TomoParameterConfiguration.tsx
@@ -84,7 +84,6 @@ export const CorSweepParameterConfiguration = ({
       <Card
         variant="outlined"
         sx={{
-          mx: "auto",
           mb: 2,
           p: 2,
           border: "1px solid #89987880",
@@ -105,7 +104,6 @@ export const CorSweepParameterConfiguration = ({
       <Card
         variant="outlined"
         sx={{
-          mx: "auto",
           mb: 2,
           p: 2,
           border: "1px solid #89987880",

From d26f6bdc603a9a24ca4ba399e04e0d4bf00c4b62 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Tue, 1 Sep 2026 16:43:12 +0100
Subject: [PATCH 3/3] Replace `div`'s with `Grid` and `Stack`

---
 frontend/unified/src/App.tsx | 33 +++++++++------------------------
 1 file changed, 9 insertions(+), 24 deletions(-)

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index c679181..b0203aa 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Typography } from "@mui/material";
+import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
 import { SessionSelector } from "./components/SessionSelector";
 import { ScanSelector } from "./components/ScanSelector";
 
@@ -14,16 +14,8 @@ import {
   apolloClientWorkflows,
 } from "../../src/ApolloClient";
 
-const VERTICAL_SPACING = 5;
-const HORIZONTAL_SPACING = 20;
-
-const VERTICAL_STACK_CONTAINER_STYLING = {
-  display: "flex",
-  flexDirection: "column",
-  gap: VERTICAL_SPACING,
-  width: "500px",
-  alignItems: "start",
-};
+const VERTICAL_SPACING = 2;
+const HORIZONTAL_SPACING = 2;
 
 const BEAMLINE_TECHNIQUES_SUBSET = {
   [Beamline.I12]: [Technique.Tomo],
@@ -97,15 +89,8 @@ export const App: React.FC = () => {
         <SessionSelector />
       </ApolloProvider>
       <ApolloProvider client={apolloClientWorkflows}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            flexWrap: "wrap",
-            gap: HORIZONTAL_SPACING,
-          }}
-        >
-          <div style={VERTICAL_STACK_CONTAINER_STYLING}>
+        <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
+          <Stack spacing={VERTICAL_SPACING} width="500px">
             <Divider sx={{ width: "100%" }} />
             <Typography variant="h5">Scan</Typography>
             <ScanSelector />
@@ -150,8 +135,8 @@ export const App: React.FC = () => {
                 Technique[technique as keyof typeof Technique]
               )}
             />
-          </div>
-          <div style={VERTICAL_STACK_CONTAINER_STYLING}>
+          </Stack>
+          <Stack spacing={VERTICAL_SPACING} width="500px">
             <Typography variant="h5">Plot</Typography>
 
             <PlaceholderComponent
@@ -174,8 +159,8 @@ export const App: React.FC = () => {
               height={200}
               width={500}
             />
-          </div>
-        </div>
+          </Stack>
+        </Grid>
       </ApolloProvider>
     </>
   );