From 3d0f0059621db6a40b44cda3a09a55b59026bae4 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:45:29 +0000
Subject: [PATCH] feat: Auto wrap balance for question and banner titles
 (#2714)

---
 .../src/@planx/components/shared/Preview/QuestionHeader.tsx | 1 +
 editor.planx.uk/src/ui/public/Banner.tsx                    | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

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 1118afa359..011e8fedd2 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
@@ -78,6 +78,7 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
               role="heading"
               aria-level={1}
               component="h1"
+              sx={{ textWrap: "balance" }}
             >
               {title}
             </Typography>
diff --git a/editor.planx.uk/src/ui/public/Banner.tsx b/editor.planx.uk/src/ui/public/Banner.tsx
index 834574a315..d949afe375 100644
--- a/editor.planx.uk/src/ui/public/Banner.tsx
+++ b/editor.planx.uk/src/ui/public/Banner.tsx
@@ -56,7 +56,11 @@ function Banner(props: BannerProps) {
             titleAccess={props.iconTitle}
           />
         )}
-        {props.heading && <Typography variant="h1">{props.heading}</Typography>}
+        {props.heading && (
+          <Typography variant="h1" sx={{ textWrap: "balance" }}>
+            {props.heading}
+          </Typography>
+        )}
         {props.children}
       </Container>
     </Root>