From cda5fc021abf9fb1afcbc3840b287f4bd5b4ac98 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Fri, 5 Jul 2024 08:34:19 +0200
Subject: [PATCH] :art: remove em and strong from promotion card ingress #2401
 (#2404)

* :art: remove em and strong from promotion card ingress

* :art: update base styling
---
 web/pageComponents/shared/portableText/Blocks.tsx  |  2 ++
 web/sections/cards/PromotionCard/PromotionCard.tsx |  4 ++++
 web/styles/tailwind.css                            | 12 ++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/web/pageComponents/shared/portableText/Blocks.tsx b/web/pageComponents/shared/portableText/Blocks.tsx
index f6a1f33a1..3747c2a61 100644
--- a/web/pageComponents/shared/portableText/Blocks.tsx
+++ b/web/pageComponents/shared/portableText/Blocks.tsx
@@ -132,6 +132,7 @@ const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicI
 export default function Blocks({
   value,
   blocks: blocksComponents,
+  marks: marksComponents,
   components,
   proseClassName = '',
   className = '',
@@ -170,6 +171,7 @@ export default function Blocks({
                     types: { ...defaultSerializers.types },
                     marks: {
                       ...defaultSerializers.marks,
+                      ...marksComponents,
                       ...(includeFootnotes && footnoteSerializer),
                     },
                   }}
diff --git a/web/sections/cards/PromotionCard/PromotionCard.tsx b/web/sections/cards/PromotionCard/PromotionCard.tsx
index 530dac13d..0aa8912ab 100644
--- a/web/sections/cards/PromotionCard/PromotionCard.tsx
+++ b/web/sections/cards/PromotionCard/PromotionCard.tsx
@@ -53,6 +53,10 @@ const PromotionCard = forwardRef<HTMLAnchorElement, PromotionCardProps>(function
             value={ingress}
             className={` max-w-prose grow ${type !== 'news' && type !== 'localNews' ? '' : 'hidden lg:block'}`}
             {...(!(variant === 'single' && !isMobile) && { clampLines: isMobile ? 3 : 5 })}
+            marks={{
+              em: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+              strong: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+            }}
           />
         )}
       </Card.Content>
diff --git a/web/styles/tailwind.css b/web/styles/tailwind.css
index d9f1cadcc..c2c362229 100644
--- a/web/styles/tailwind.css
+++ b/web/styles/tailwind.css
@@ -4,6 +4,18 @@
 @import './components/videojs.css';
 @import 'tailwindcss/utilities';
 
+@layer base {
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+}
+
 @layer components {
   article {
     counter-reset: footnotes;