diff --git a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx index e7521ec41d..53c7cdc97f 100644 --- a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx +++ b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx @@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography"; import { visuallyHidden } from "@mui/utils"; import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider"; import { useStore } from "pages/FlowEditor/lib/store"; -import React from "react"; +import React, { useLayoutEffect, useRef, useState } from "react"; import Caret from "ui/icons/Caret"; import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml"; @@ -40,12 +40,8 @@ const ChangeLink = styled(Box)(({ theme }) => ({ position: "absolute", right: theme.spacing(-8), top: 0, - height: "100%", - minWidth: theme.spacing(8), display: "flex", - justifyContent: "flex-end", - alignItems: "center", - flexShrink: "0", + alignContent: "center", "& button": { padding: "1em 0.25em", fontSize: "inherit", @@ -130,10 +126,18 @@ const ResultReason: React.FC = ({ flagColor, }) => { const changeAnswer = useStore((state) => state.changeAnswer); - const [expanded, setExpanded] = React.useState(false); + const accordionSummaryRef = useRef(null); + const [accordionSummaryHeight, setAccordionSummaryHeight] = useState(0); + + // Match height of closed accordion to ChangeLink + useLayoutEffect(() => { + if (accordionSummaryRef.current) { + const height = accordionSummaryRef.current.clientHeight; + setAccordionSummaryHeight(height); + } + }, [accordionSummaryRef]); const hasMoreInfo = question.data.info ?? question.data.policyRef; - const toggleAdditionalInfo = () => setExpanded(!expanded); const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${ hasMoreInfo @@ -152,53 +156,32 @@ const ResultReason: React.FC = ({ hasMoreInfo && toggleAdditionalInfo()} - expanded={expanded} elevation={0} square > - - : null} - aria-label={ariaLabel} - aria-controls={`group-${id}-content`} - id={`group-${id}-header`} + : null} + aria-label={ariaLabel} + aria-controls={`group-${id}-content`} + id={`group-${id}-header`} + ref={accordionSummaryRef} + > + - - - {question.data.text}
- {response} -
-
-
- - - {showChangeButton && ( - { - event.stopPropagation(); - handleChangeAnswer(id); - }} - > - Change - - your response to {question.data.text || "this question"} - - - )} - - -
+ {question.data.text}
+ {response} + + + {hasMoreInfo && ( @@ -218,6 +201,22 @@ const ResultReason: React.FC = ({ )}
+ + {showChangeButton && ( + { + event.stopPropagation(); + handleChangeAnswer(id); + }} + > + Change + + your response to {question.data.text || "this question"} + + + )} +
);