Merge pull request #515 from stasadev/bug/frontend-layout-is-broken

Fix frontend layout
PacoVK · Jul 2, 2023 · 0b49c04 · 0b49c04
2 parents 75da370 + 3377ad5
commit 0b49c04
Showing 1 changed file with 55 additions and 55 deletions.
diff --git a/frontend/views/Overview.tsx b/frontend/views/Overview.tsx
@@ -25,6 +25,7 @@ import { callApi } from "../api/Http";
 import MessageItem from "../components/MessageItem";
 import QueueIcon from "@mui/icons-material/CalendarViewWeek";
 import Grid from "@mui/material/Unstable_Grid2";
+import Box from "@mui/material/Box";
 
 const a11yProps = (id: string, index: number) => {
   return {
@@ -151,10 +152,11 @@ const Overview = () => {
   };
 
   return (
-    <Grid container spacing={0}>
-      <Grid xs={3}>
+    <Box sx={{ display: "flex" }}>
+      <Box>
         <Drawer
           sx={{
+            width: 380,
             flexShrink: 0,
             "& .MuiDrawer-paper": {
               boxSizing: "border-box",
@@ -220,60 +222,58 @@ const Overview = () => {
             ))}
           </List>
         </Drawer>
-      </Grid>
-      <Grid xs={9}>
-        <Grid container spacing={0}>
-          <Grid xs={9}>
-            <Toolbar>
-              <Typography variant="h6" margin={"auto"}>
-                Messages
-              </Typography>
-            </Toolbar>
-          </Grid>
-          <Grid xs={9}>
-            {error !== "" ? (
-              <Container maxWidth="md">
-                <Alert
-                  message={error}
-                  severity={"error"}
-                  onClose={() => setError("")}
-                />
-              </Container>
-            ) : null}
-            {queues?.length === 0 ? (
-              <Container maxWidth="md">
-                <MuiAlert severity="info">
-                  <AlertTitle>No Queue</AlertTitle>
-                  No Queues exist in region (default was "eu-central-1")
-                </MuiAlert>
-              </Container>
-            ) : null}
-          </Grid>
-          <Grid xs={9}>
-            {queues?.map((queue, index) => (
-              <TabPanel
-                value={listItemIndex}
-                index={index}
-                {...a11yProps("tabpanel", index)}
-              >
-                <Grid container spacing={2}>
-                  {messages?.map((message, index) => (
-                    <Grid xs={12} {...a11yProps("gridItem", index)}>
-                      <Paper>
-                        <MessageItem
-                          data={message}
-                          {...a11yProps("messageItem", index)}
-                        />
-                      </Paper>
-                    </Grid>
-                  ))}
-                </Grid>
-              </TabPanel>
-            ))}
-          </Grid>
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <Grid xs={12}>
+          <Toolbar>
+            <Typography variant="h6" margin={"auto"}>
+              Messages
+            </Typography>
+          </Toolbar>
+        </Grid>
+        <Grid xs={12}>
+          {error !== "" ? (
+            <Container maxWidth="md">
+              <Alert
+                message={error}
+                severity={"error"}
+                onClose={() => setError("")}
+              />
+            </Container>
+          ) : null}
+          {queues?.length === 0 ? (
+            <Container maxWidth="md">
+              <MuiAlert severity="info">
+                <AlertTitle>No Queue</AlertTitle>
+                No Queues exist in region (default was "eu-central-1")
+              </MuiAlert>
+            </Container>
+          ) : null}
+        </Grid>
+        <Grid xs={12}>
+          {queues?.map((queue, index) => (
+            <TabPanel
+              value={listItemIndex}
+              index={index}
+              {...a11yProps("tabpanel", index)}
+            >
+              <Grid container spacing={2}>
+                {messages?.map((message, index) => (
+                  <Grid xs={12} {...a11yProps("gridItem", index)}>
+                    <Paper>
+                      <MessageItem
+                        data={message}
+                        {...a11yProps("messageItem", index)}
+                      />
+                    </Paper>
+                  </Grid>
+                ))}
+              </Grid>
+            </TabPanel>
+          ))}
         </Grid>
-      </Grid>
-    </Grid>
+      </Box>
+    </Box>
   );
 };