Fixed Blue Gradient and Status Bar Offsets

Data/WebUI/src/App.js

@@ -1,7 +1,6 @@
 import React from "react";
 import FlowEditor from "./components/FlowEditor";
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-
 import {
   AppBar,
   Toolbar,
@@ -29,7 +28,6 @@ const darkTheme = createTheme({
 });
 
 export default function App() {
-    // Separate menu state for each dropdown
   const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null);
   const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
 
@@ -52,8 +50,13 @@ export default function App() {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-            <Box display="flex" flexDirection="column" height="100vh" bgcolor="#121212">
+      {/*
-                {/* Top Menu Bar */}
+        Main container that:
+          - fills 100% viewport height
+          - organizes content with flexbox (vertical)
+      */}
+      <Box display="flex" flexDirection="column" height="100vh">
+        {/* --- TOP BAR --- */}
         <AppBar position="static" sx={{ bgcolor: "#092c44" }}>
           <Toolbar>
             <Typography variant="h6" sx={{ flexGrow: 1 }}>
@@ -97,20 +100,38 @@ export default function App() {
           </Toolbar>
         </AppBar>
 
-                {/* Main Content - React Flow */}
+        {/* --- REACT FLOW EDITOR --- */}
-                <Box flexGrow={1}>
+        {/*
-                    <FlowEditor updateNodeCount={(count) => {
+          flexGrow={1} ⇒ This box expands to fill remaining vertical space 
+          overflow="hidden" ⇒ No scroll bars, so React Flow does internal panning
+          mt: 1 ⇒ Add top margin so the gradient starts closer to the AppBar.
+        */}
+        <Box flexGrow={1} overflow="hidden" sx={{ mt: 0 }}>
+          <FlowEditor
+            updateNodeCount={(count) => {
               document.getElementById("nodeCount").innerText = count;
-                    }} />
+            }}
+          />
         </Box>
 
-                {/* Status Bar */}
+        {/* --- STATUS BAR at BOTTOM --- */}
         <Box
           component="footer"
-                    sx={{ bgcolor: "#1e1e1e", color: "white", padding: "5px 10px", textAlign: "center" }}
+          sx={{
+            bgcolor: "#1e1e1e",
+            color: "white",
+            px: 2,
+            py: 1,
+            textAlign: "left"
+          }}
         >
-                    Nodes: <span id="nodeCount">0</span> | Update Rate: 500ms | Flask API Server:
+          <b>Nodes</b>: <span id="nodeCount">0</span> | <b>Update Rate</b>: 500ms | <b>Flask API Server:</b>{" "}
-                    <a href="http://127.0.0.1:5000/data" style={{ color: "#3c78b4" }}> http://127.0.0.1:5000/data</a>
+          <a
+            href="http://127.0.0.1:5000/data"
+            style={{ color: "#3c78b4" }}
+          >
+            http://127.0.0.1:5000/data
+          </a>
         </Box>
       </Box>
     </ThemeProvider>