fix(SW-391): fixed issues with sidepeek functionality inside teaser cards

components/TempDesignSystem/SidePeek/index.tsx

@@ -41,7 +41,7 @@ function SidePeek({
 
   if (isSSR) {
     return (
-      <div>
+      <div className={styles.visuallyHidden}>
         <h2>{title}</h2>
         {children}
       </div>

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -21,6 +21,12 @@
   }
 }
 
+.visuallyHidden {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .overlay {
   position: fixed;
   top: 0;
@@ -40,7 +46,7 @@
   height: 100vh;
   background-color: var(--Base-Background-Primary-Normal);
   z-index: var(--sidepeek-z-index);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+  outline: none;
 }
 
 .modal[data-entering] {

components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -21,7 +21,7 @@ export default function TeaserCardSidepeek({
   const { heading, content, primary_button, secondary_button } = sidePeekContent
 
   return (
-    <>
+    <div>
       <Button
         onPress={() => setSidePeekIsOpen(true)}
         theme="base"
@@ -77,6 +77,6 @@ export default function TeaserCardSidepeek({
           )}
         </div>
       </SidePeek>
-    </>
+    </div>
   )
 }