feat(search): Add word break after special characters in search cards (…

…#3741)
theopensystemslab · Oct 1, 2024 · 45c295e · 45c295e
1 parent 1c3e77f
commit 45c295e
Showing 1 changed file with 15 additions and 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
@@ -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 />}
+        </>
       ))}
     </>
   );