From 12b22ba8cd5ba406d40c2ec4abe54ce178796cc1 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 3 Jun 2025 09:33:52 +0000
Subject: [PATCH] fix(SW-2928): Added different margins on wellness content
 wrapper depending on which buttons are present
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Christian Andolf
Approved-by: Matilda Landström
---
 .../SidePeeks/WellnessAndExercise/index.tsx     | 17 ++++++++++++-----
 .../wellnessAndExercise.module.css              | 13 ++++++++++---
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
index d75fe2c5c..31f43ad71 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
@@ -1,3 +1,5 @@
+import { cx } from "class-variance-authority"
+
 import ButtonLink from "@/components/ButtonLink"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
@@ -23,14 +25,19 @@ export default async function WellnessAndExerciseSidePeek({
 
   return (
     <SidePeek contentKey={SidepeekSlugs.wellness} title={heading}>
-      <div className={styles.wrapper}>
+      <div
+        className={cx(styles.wrapper, {
+          [styles.hasSpaPage]: spaPage,
+          [styles.hasWellnessExercisePage]: wellnessExercisePageUrl,
+        })}
+      >
         {healthFacilities.map((facility) => (
           <Facility key={facility.type} data={facility} />
         ))}
       </div>
-      {(spaPage || wellnessExercisePageUrl) && (
+      {spaPage || wellnessExercisePageUrl ? (
         <div className={styles.buttonContainer}>
-          {spaPage && (
+          {spaPage ? (
             <ButtonLink
               href={spaPage.url}
               variant="Tertiary"
@@ -39,7 +46,7 @@ export default async function WellnessAndExerciseSidePeek({
             >
               {spaPage.buttonCTA}
             </ButtonLink>
-          )}
+          ) : null}
           {wellnessExercisePageHref ? (
             <ButtonLink
               href={wellnessExercisePageHref}
@@ -53,7 +60,7 @@ export default async function WellnessAndExerciseSidePeek({
             </ButtonLink>
           ) : null}
         </div>
-      )}
+      ) : null}
     </SidePeek>
   )
 }
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
index f6f47761e..a79578840 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css
@@ -2,9 +2,16 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x4);
-  margin-bottom: calc(
-    var(--Spacing-x4) * 2 + 80px
-  ); /* Creates space between the wrapper and buttonContainer */
+
+  /* Creates space between the wrapper and buttonContainer depending on which buttons are present */
+  &.hasSpaPage,
+  &.hasWellnessPage {
+    margin-bottom: 125px;
+  }
+
+  &.hasSpaPage.hasWellnessExercisePage {
+    margin-bottom: 201px;
+  }
 }
 
 .buttonContainer {