From a14cc6782a0b1a10fa1e5e7fa2c3cab2606f932f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Wed, 11 Oct 2023 16:54:12 +0100
Subject: [PATCH 1/3] feat: Move change button to section

---
 .../@planx/components/shared/Preview/SummaryList.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 9f4890fb77..b05479587c 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -168,13 +168,21 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
                   >
                     {props.flow[`${Object.keys(sections[i])[0]}`]?.data?.title}
                   </Typography>
+                  <Link
+                    onClick={() => props.changeAnswer(filteredBreadcrumbs[0].nodeId)}
+                    component="button"
+                    fontSize="body2.fontSize"
+                  >
+                    Change
+                    <span style={visuallyHidden}>the answers in this section</span>
+                  </Link>
                 </Box>
                 <SummaryList
                   summaryBreadcrumbs={filteredBreadcrumbs}
                   flow={props.flow}
                   passport={props.passport}
                   changeAnswer={props.changeAnswer}
-                  showChangeButton={props.showChangeButton}
+                  showChangeButton={false}
                 />
               </React.Fragment>
             ),

From 3b14393c371a12d7ce452ba63efe751984b2b502 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Tue, 17 Oct 2023 10:39:16 +0100
Subject: [PATCH 2/3] feat: Update styling for review section

---
 .../components/shared/Preview/SummaryList.tsx | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index b05479587c..4e59797cfb 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -15,9 +15,9 @@ export default SummaryListsBySections;
 
 const Grid = styled("dl")(({ theme }) => ({
   display: "grid",
-  gridTemplateColumns: "1fr 2fr 100px",
+  gridTemplateColumns: "1fr 2fr",
   gridRowGap: "10px",
-  marginTop: theme.spacing(4),
+  marginTop: theme.spacing(2),
   marginBottom: theme.spacing(4),
   "& > *": {
     borderBottom: `1px solid ${theme.palette.border.main}`,
@@ -39,10 +39,7 @@ const Grid = styled("dl")(({ theme }) => ({
     // middle column
     paddingLeft: "10px",
   },
-  "& dd:nth-of-type(2n)": {
-    // right column
-    textAlign: "right",
-  },
+
 }));
 
 const presentationalComponents: {
@@ -161,17 +158,17 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
           (filteredBreadcrumbs, i) =>
             Boolean(filteredBreadcrumbs.length) && (
               <React.Fragment key={i}>
-                <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 5 }}>
                   <Typography
                     component={props.sectionComponent || "h2"}
-                    variant="h4"
+                    variant="h3"
                   >
                     {props.flow[`${Object.keys(sections[i])[0]}`]?.data?.title}
                   </Typography>
                   <Link
                     onClick={() => props.changeAnswer(filteredBreadcrumbs[0].nodeId)}
                     component="button"
-                    fontSize="body2.fontSize"
+                    fontSize="body1.fontSize"
                   >
                     Change
                     <span style={visuallyHidden}>the answers in this section</span>
@@ -227,8 +224,8 @@ function SummaryList(props: SummaryListProps) {
               flow={props.flow}
               passport={props.passport}
             />
-            <dd>
-              {props.showChangeButton && (
+            {props.showChangeButton && (
+              <dd>  
                 <Link
                   onClick={() => handleChangeAnswer(nodeId)}
                   component="button"
@@ -239,8 +236,8 @@ function SummaryList(props: SummaryListProps) {
                     {node.data?.title || node.data?.text || "this answer"}
                   </span>
                 </Link>
-              )}
-            </dd>
+              </dd>
+             )}
           </React.Fragment>
         ),
       )}

From 249e94cd0e00e963039222b4cb3c78b9ae268056 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Mon, 27 Nov 2023 16:48:56 +0000
Subject: [PATCH 3/3] fix: help text pointer overlap

---
 .../src/@planx/components/shared/Preview/QuestionHeader.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
index 48a8ef9536..fe5d974714 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
@@ -47,6 +47,7 @@ const HelpButtonWrapper = styled(Box)(({ theme }) => ({
   width: HelpButtonMinWidth,
   top: "-4px",
   right: "-6px",
+  pointerEvents: "none",
   [theme.breakpoints.up("md")]: {
     width: "80px",
     top: 0,
@@ -72,6 +73,7 @@ export const HelpButton = styled(Button)(({ theme }) => ({
   boxShadow: "none",
   fontSize: "1.125em",
   filter: "drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5))",
+  pointerEvents: "auto",
   [theme.breakpoints.up("lg")]: {
     minHeight: "48px",
     fontSize: "1.25em",