fix: 🐛 fix new model page layout

klarna-incubator · Oct 25, 2024 · 30c4da8 · 30c4da8
1 parent 138e795
commit 30c4da8
Show file tree

Hide file tree

Showing 12 changed files with 297 additions and 284 deletions.
diff --git a/app/src/App.js b/app/src/App.js
@@ -95,8 +95,8 @@ export default function App() {
             sx={{
               display: "flex",
               flexDirection: "column",
-              height: "calc(100% - 64px)", // 64px is the height of Navbar
-              maxHeight: "calc(100% - 64px)",
+              height: isFramed ? "100%" : "calc(100% - 64px)", // 64px is the height of Navbar
+              maxHeight: isFramed ? "100%" : "calc(100% - 64px)", // 64px is the height of Navbar
               width: "100%",
             }}
           >

diff --git a/app/src/components/elements/CenteredPage.js b/app/src/components/elements/CenteredPage.js
@@ -1,20 +1,18 @@
 import React from "react";
-import { useIsFramed } from "../../hooks/useIsFramed";
 import Grid from "@mui/material/Grid2";
 
-export function CenteredPage({ children }) {
-  const isFramed = useIsFramed();
+export function CenteredPage({ children, marginTop = true }) {
   return (
     <Grid
       container
-      spacing={0}
+      columns={12}
+      spacing={2}
       direction="row"
-      alignItems="center"
-      justifyContent="center"
+      marginTop={marginTop ? "20px" : ""}
+      marginX={"auto"}
+      maxWidth={"80%"}
     >
-      <Grid width={"80%"} marginTop={isFramed ? "" : "84px"}>
-        {children}
-      </Grid>
+      {children}
     </Grid>
   );
 }
diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -21,58 +21,52 @@ export default function Home() {
 
   return (
     <CenteredPage>
-      <Grid container spacing={2} columns={12}>
+      <Grid
+        size={6}
+        maxHeight="88vh"
+        sx={{ display: "flex", flexFlow: "column" }}
+      >
+        <Typography variant="h5">Recent Threat Models</Typography>
+        <Typography className="dimmed">
+          Threat models you recently interacted with
+        </Typography>
+        <ModelList models={recentModels} error={isError} pending={isLoading} />
+      </Grid>
+      {user?.teams?.length > 0 && (
         <Grid
           size={6}
+          columns={1}
           maxHeight="88vh"
           sx={{ display: "flex", flexFlow: "column" }}
         >
-          <Typography variant="h5">Recent Threat Models</Typography>
+          <Typography variant="h5">Team Systems</Typography>
           <Typography className="dimmed">
-            Threat models you recently interacted with
+            Systems owned by the accountable teams you're in
           </Typography>
-          <ModelList
-            models={recentModels}
-            error={isError}
-            pending={isLoading}
-          />
-        </Grid>
-        {user?.teams?.length > 0 && (
-          <Grid
+          <Box
             size={6}
-            columns={1}
-            maxHeight="88vh"
-            sx={{ display: "flex", flexFlow: "column" }}
+            sx={{
+              overflow: "auto",
+              marginTop: "25px",
+              display: "flex",
+              flexDirection: "column",
+            }}
           >
-            <Typography variant="h5">Team Systems</Typography>
-            <Typography className="dimmed">
-              Systems owned by the accountable teams you're in
-            </Typography>
-            <Box
-              size={6}
-              sx={{
-                overflow: "auto",
-                marginTop: "25px",
-                display: "flex",
-                flexDirection: "column",
-              }}
-            >
-              <Grid container spacing={2} columns={1} style={{ flex: "2" }}>
-                {user?.teams &&
-                  user.teams.map((team, i) => (
-                    <Grid size={1}>
-                      <TeamSystemsPageList
-                        key={team.id}
-                        teamId={team.id}
-                        pagesize={user?.teams.length > 1 ? 5 : 10}
-                      />
-                    </Grid>
-                  ))}
-              </Grid>
-            </Box>
-          </Grid>
-        )}
-      </Grid>
+            <Grid container spacing={2} columns={1} style={{ flex: "2" }}>
+              {user?.teams &&
+                user.teams.map((team, i) => (
+                  <Grid size={1}>
+                    <TeamSystemsPageList
+                      key={team.id}
+                      teamId={team.id}
+                      pagesize={user?.teams.length > 1 ? 5 : 10}
+                    />
+                  </Grid>
+                ))}
+            </Grid>
+          </Box>
+        </Grid>
+      )}
     </CenteredPage>
   );
 }
diff --git a/app/src/components/model/Model.js b/app/src/components/model/Model.js
@@ -27,8 +27,12 @@ import { useSelector } from "react-redux";
 function setGridArea(
   leftPanelCollapsed,
   rightPanelCollapsed,
-  bottomPanelCollapsed
+  bottomPanelCollapsed,
+  isFramed
 ) {
+  if (isFramed) {
+    return `'board board board' 'board board board'`;
+  }
   // Add first row
   let firstRow = `'${leftPanelCollapsed ? "board" : "left"} board ${
     rightPanelCollapsed ? "board" : "right"
@@ -139,7 +143,8 @@ export function Model() {
           gridTemplateAreas: setGridArea(
             leftPanelCollapsed,
             rightPanelCollapsed,
-            bottomPanelCollapsed
+            bottomPanelCollapsed,
+            isFramed
           ),
         }}
       >

diff --git a/app/src/components/model/ModelPreview.js b/app/src/components/model/ModelPreview.js
@@ -1,9 +1,13 @@
+import { Box } from "@mui/material";
+
 export function ModelPreview({ modelId, ...props }) {
   return (
-    <iframe
-      title="Model Preview"
-      {...props}
-      src={document.location.origin + "/model/" + modelId}
-    ></iframe>
+    <Box>
+      <iframe
+        title="Model Preview"
+        {...props}
+        src={document.location.origin + "/model/" + modelId}
+      ></iframe>
+    </Box>
   );
 }