fix: overflow with pre tag

src/sections/collection/featured-items/FeaturedItems.module.scss

@@ -7,6 +7,8 @@
 }
 
 .featured-item-card {
+  --inner-content-gap: 2rem;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -36,13 +38,14 @@
   .inner-content {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: var(--inner-content-gap);
     align-items: flex-start;
     padding-inline: 1rem;
     padding-bottom: 1rem;
 
     .content {
       flex: 1;
+      max-width: 100%;
     }
 
     .image {
@@ -77,6 +80,12 @@
     .inner-content {
       flex-direction: row;
 
+      &:has(.image) {
+        .content {
+          max-width: calc(70% - var(--inner-content-gap));
+        }
+      }
+
       .image {
         max-width: 30%;
       }
@@ -86,8 +95,16 @@
   @media (min-width: 1024px) {
     max-height: 80dvh;
 
-    .inner-content .image {
-      max-width: 40%;
+    .inner-content {
+      &:has(.image) {
+        .content {
+          max-width: calc(60% - var(--inner-content-gap));
+        }
+      }
+
+      .image {
+        max-width: 40%;
+      }
     }
   }
 }

src/sections/collection/featured-items/silder/Slider.module.scss

@@ -28,6 +28,7 @@
       scroll-snap-align: start;
       justify-content: center;
       max-height: 100%;
+      overflow-x: hidden;
     }
   }
 

tests/component/collection/domain/models/CollectionFeaturedItemMother.ts

@@ -9,33 +9,31 @@ export class CollectionFeaturedItemMother {
         order: 1,
         title: 'Featured item 1',
         content:
-          '<h1>Featured Item 1</h1><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.<br>Featured Item 1</p><p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p><h2>Lorem Ipsum: Heading 2</h2><p>Suspendisse potenti. In <strong>non</strong> libero a nibh <em>pellentesque</em> ultricies. Nulla facilisi.</p><ul><li><p>Curabitur blandit tempus porttitor.</p></li><li><p>Aenean lacinia bibendum nulla sed consectetur.</p></li><li><p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></li></ul><p>Quisque sit amet est et sapien ullamcorper pharetra. <strong>Vivamus venenatis</strong> vehicula ligula, a tincidunt orci blandit sed:</p><ol><li><p>Donec ullamcorper nulla non metus auctor fringilla.</p></li><li><p>Nulla vitae elit libero, a pharetra augue.</p></li><li><p>Cras mattis consectetur purus sit amet fermentum.</p></li></ol><blockquote><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.”</p></blockquote><p>Proin <code>code</code> varius, eros sit amet vestibulum interdum, lorem urna ultricies est, in malesuada sem erat id nunc.</p>',
-        imageUrl: 'https://via.placeholder.com/400x400'
+          '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'
       },
       {
         id: 'item-2-id',
         type: 'custom',
         order: 2,
         title: 'Featured item 2',
         content:
-          '<p>Lorem 2 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>'
+          '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'
       },
       {
         id: 'item-3-id',
         type: 'custom',
         order: 3,
         title: 'Featured item 3',
         content:
-          '<p>Lorem 3 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>'
+          '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'
       },
       {
         id: 'item-4-id',
         type: 'custom',
         order: 4,
         title: 'Featured item 4',
         content:
-          '<p>Lorem 4 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>',
-        imageUrl: 'https://via.placeholder.com/400x1600'
+          '<h2 class="rte-heading">Some Title</h2><h3 class="rte-heading">Heading 3</h3><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong> <em class="rte-italic">new </em><s class="rte-strike">rick</s> <strong class="rte-bold">rich</strong> <em class="rte-italic">text</em> <code class="rte-code">editor</code>! This is a <a target="_blank" rel="noopener noreferrer nofollow" class="rte-link" href="https://beta.dataverse.org/spa/">link</a>.</p><ul class="rte-bullet-list"><li><p class="rte-paragraph">Item</p></li><li><p class="rte-paragraph">Item</p></li></ul><ol class="rte-ordered-list"><li><p class="rte-paragraph">Item 1</p></li><li><p class="rte-paragraph">Item 2</p></li></ol><pre class="rte-code-block"><code class="language-typescriptreact">onUpdate: ({ editor }) =&gt; onChange &amp;&amp; onChange(editor.getHTML())</code></pre><blockquote class="rte-blockquote"><p class="rte-paragraph">This is a blockquoute</p></blockquote><p class="rte-paragraph"></p><p class="rte-paragraph"></p>'
       }
     ]
   }