From bfe24ae3f818fce35192c1154caca15f62fc7a58 Mon Sep 17 00:00:00 2001
From: Yousef Moazzam <yousef.moazzam@diamond.ac.uk>
Date: Fri, 16 Oct 2026 12:01:09 +0100
Subject: [PATCH] Make sidebar not cover page contents

---
 frontend/unified/src/App.tsx | 45 +++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index c6bce350..a3d5fdd3 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -18,6 +18,7 @@ import { SESSION_QUERY } from "./graphql/SessionQuery";
 
 const VERTICAL_SPACING = 2;
 const HORIZONTAL_SPACING = 2;
+const SIDEBAR_WIDTH = 300;
 
 const useFedid = (): string => {
   const token = useAuth().getToken();
@@ -172,28 +173,40 @@ export const App: React.FC = () => {
     const beamline = mapStringsToBeamline(session.instrument.name);
 
     return (
-      <>
-        <Drawer variant="permanent">
+      <Box sx={{ display: "flex" }}>
+        <Drawer
+          variant="permanent"
+          sx={{
+            width: SIDEBAR_WIDTH,
+            flexShrink: 0,
+            "& .MuiDrawer-paper": {
+              width: SIDEBAR_WIDTH,
+              boxSizing: "border-box",
+            },
+          }}
+        >
           <Sidebar
             scanIds={selectedScanIds}
             updateSelectedScanIds={setSelectedScanIds}
           />
         </Drawer>
-        {/* Wrap the SessionSelector in a <Stack> as it the TextField won't remember
+        <Box sx={{ flexGrow: 1 }}>
+          {/* Wrap the SessionSelector in a <Stack> as it the TextField won't remember
         the session text otherwise */}
-        <Stack>
-          {getSessionSelector(latestSessionAvailable, session, sessionName)}
-        </Stack>
-
-        <ApolloProvider client={apolloClientWorkflows}>
-          <WorkflowsDataFetcher
-            visit={selectedVisit}
-            beamline={beamline}
-            startTime={session.startTime}
-            scanIds={selectedScanIds}
-          />
-        </ApolloProvider>
-      </>
+          <Stack>
+            {getSessionSelector(latestSessionAvailable, session, sessionName)}
+          </Stack>
+
+          <ApolloProvider client={apolloClientWorkflows}>
+            <WorkflowsDataFetcher
+              visit={selectedVisit}
+              beamline={beamline}
+              startTime={session.startTime}
+              scanIds={selectedScanIds}
+            />
+          </ApolloProvider>
+        </Box>
+      </Box>
     );
   } else {
     return (