Merge branch 'better_settings_layout' into refactor_storage

gui_dev/src/components/StatusBar/StatusBar.jsx

@@ -2,12 +2,14 @@ import { ResizeHandle } from "./ResizeHandle";
 import { SocketStatus } from "./SocketStatus";
 import { WebviewStatus } from "./WebviewStatus";
 
-import { useWebviewStore } from "@/stores";
-
+import { useUiStore, useWebviewStore } from "@/stores";
 import { Stack } from "@mui/material";
 
 export const StatusBar = () => {
-  const { isWebView } = useWebviewStore((state) => state.isWebView);
+  const isWebView = useWebviewStore((state) => state.isWebView);
+  const createStatusBarContent = useUiStore((state) => state.statusBarContent);
+
+  const StatusBarContent = createStatusBarContent();
 
   return (
     <Stack
@@ -17,8 +19,11 @@ export const StatusBar = () => {
       bgcolor="background.level1"
       borderTop="2px solid"
       borderColor="background.level3"
+      height="2rem"
     >
-      <WebviewStatus />
+      {StatusBarContent && <StatusBarContent />}
+
+      {/* <WebviewStatus /> */}
       {/* Current experiment */}
       {/* Current stream */}
       {/* Current activity */}

gui_dev/src/components/TitledBox.jsx

@@ -1,4 +1,4 @@
-import { Container } from "@mui/material";
+import { Box, Container } from "@mui/material";
 
 /**
  * Component that uses the Box component to render an HTML fieldset element
@@ -13,14 +13,14 @@ export const TitledBox = ({
   children,
   ...props
 }) => (
-  <Container
+  <Box
     component="fieldset"
     {...props}
     sx={{
       borderRadius: 5,
       border: "1px solid #555",
       backgroundColor: "#424242",
-      padding: 2,
+      padding: 1,
       width: "100%",
       gap: 2,
       display: "flex",
@@ -31,5 +31,5 @@ export const TitledBox = ({
   >
     <legend>{title}</legend>
     {children}
-  </Container>
+  </Box>
 );