From 9bb9f61da14c1362b57762c79fd674f8c37cd182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 30 Sep 2024 17:29:08 +0100
Subject: [PATCH] feat: Add wordbreak after special characters

---
 .../components/Sidebar/Search/Headline.tsx    | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx
index b247d74c3d..eb3040999b 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx
@@ -15,17 +15,21 @@ export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
   return (
     <>
       {text.split("").map((char, index) => (
-        <Typography
-          component="span"
-          variant={variant}
-          key={`headline-character-${index}`}
-          sx={(theme) => ({
-            fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",
-            fontSize: theme.typography.body2.fontSize,
-          })}
-        >
-          {char}
-        </Typography>
+        <>
+          <Typography
+            component="span"
+            variant={variant}
+            key={`headline-character-${index}`}
+            sx={(theme) => ({
+              fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",
+              fontSize: theme.typography.body2.fontSize,
+            })}
+          >
+            {char}
+          </Typography>
+          {/* Add wordbreak after special characters */}
+          {char.match(/\W/) && <wbr />}
+        </>
       ))}
     </>
   );