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> ); };