From d891194a9bee71728a936b527b9e5bd1cc6b772e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 8 Apr 2024 08:00:28 +0100
Subject: [PATCH] fix: Hoist `main` element higher up DOM tree

---
 editor.planx.uk/src/pages/Preview/ResumePage.tsx    |  2 +-
 editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx |  2 +-
 .../src/pages/layout/SaveAndReturnLayout.tsx        | 13 +++++++++++--
 editor.planx.uk/src/routes/views/standalone.tsx     |  5 ++++-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/pages/Preview/ResumePage.tsx b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
index b8dcac411f..09510c7344 100644
--- 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
index 5b82544687..c2636413fb 100644
--- 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
index e6ea3f75b3..982d7347e1 100644
--- 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
index 728835f90e..7eaabb156c 100644
--- 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>
   );
 };