feat: Auto wrap balance for question and banner titles (#2714)

theopensystemslab · Jan 30, 2024 · 3d0f005 · 3d0f005
1 parent 96af82d
commit 3d0f005
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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>