fix: Hoist main element higher up DOM tree (#2994)

theopensystemslab · Apr 8, 2024 · 7eafaf2 · 7eafaf2
1 parent cdd78e9
commit 7eafaf2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/editor.planx.uk/src/pages/Preview/ResumePage.tsx b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
@@ -60,7 +60,7 @@ export const EmailRequired: React.FC<{ setEmail: (email: string) => void }> = ({
   });
 
   return (
-    <Box width="100%" component="main" id="main-content">
+    <Box width="100%">
       <Card handleSubmit={formik.handleSubmit}>
         <QuestionHeader
           title="Resume your application"

diff --git a/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx b/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
@@ -33,7 +33,7 @@ export const ConfirmEmail: React.FC<{
   });
 
   return (
-    <Box width="100%" component="main" id="main-content">
+    <Box width="100%">
       <Card handleSubmit={formik.handleSubmit}>
         <QuestionHeader
           title="Enter your email address"

diff --git a/editor.planx.uk/src/pages/layout/SaveAndReturnLayout.tsx b/editor.planx.uk/src/pages/layout/SaveAndReturnLayout.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import { NotFoundError } from "navi";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { PropsWithChildren } from "react";
@@ -22,8 +23,16 @@ const SaveAndReturnLayout = ({ children }: PropsWithChildren) => {
       {
         {
           [AppPath.SingleSession]: children,
-          [AppPath.Save]: <SavePage />,
-          [AppPath.Resume]: <ResumePage />,
+          [AppPath.Save]: (
+            <Box component="main" id="main-content">
+              <SavePage />
+            </Box>
+          ),
+          [AppPath.Resume]: (
+            <Box component="main" id="main-content">
+              <ResumePage />
+            </Box>
+          ),
           [AppPath.SaveAndReturn]: <SaveAndReturn>{children}</SaveAndReturn>,
         }[path]
       }

diff --git a/editor.planx.uk/src/routes/views/standalone.tsx b/editor.planx.uk/src/routes/views/standalone.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import gql from "graphql-tag";
 import { publicClient } from "lib/graphql";
 import { NaviRequest, NotFoundError } from "navi";
@@ -37,7 +38,9 @@ const standaloneView = async (req: NaviRequest) => {
 
   return (
     <PublicLayout>
-      <View />
+      <Box component="main" id="main-content">
+        <View />
+      </Box>
     </PublicLayout>
   );
 };