From b563a83f10e33323406cad1f880e4adf838c812f Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 3 Dec 2025 07:16:51 +0000
Subject: [PATCH] Merged in fix/STAY-132 (pull request #3283)

fix: align guarantee info button and text to the right regardless of breakpoint

* fix: align guarantee info button and text to the right regardless of breakpoint


Approved-by: Erik Tiekstra
---
 .../guaranteeInfoModal.module.css             |  2 ++
 .../GuaranteeInfo/guaranteeInfo.module.css    |  5 ++---
 .../ReferenceCard/GuaranteeInfo/index.tsx     | 20 +++++++++----------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css
index 046219bd3..fad2ef7cc 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css
@@ -12,6 +12,8 @@
   color: var(--Icon-Interactive-Default);
   cursor: pointer;
   flex-shrink: 0;
+  vertical-align: bottom;
+  margin-right: var(--Space-x05);
 }
 
 .closeButton {
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/guaranteeInfo.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/guaranteeInfo.module.css
index b8508ea70..17d2fbd2c 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/guaranteeInfo.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/guaranteeInfo.module.css
@@ -2,6 +2,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  gap: var(--Space-x1);
 }
 
 .label {
@@ -15,7 +16,5 @@
 }
 
 .guaranteeInfo {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--Space-x05);
+  text-align: right;
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/index.tsx
index 9b3fe8466..1cb1d843b 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/index.tsx
@@ -36,17 +36,15 @@ export default function GuaranteeInfo() {
           </p>
         </Typography>
       </div>
-      <div className={styles.guaranteeInfo}>
-        <GuaranteeInfoModal />
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p>
-            {intl.formatMessage({
-              id: "myStay.roomHeldAfter18",
-              defaultMessage: "Room held after 18:00",
-            })}
-          </p>
-        </Typography>
-      </div>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <span className={styles.guaranteeInfo}>
+          <GuaranteeInfoModal />
+          {intl.formatMessage({
+            id: "myStay.roomHeldAfter18",
+            defaultMessage: "Room held after 18:00",
+          })}
+        </span>
+      </Typography>
     </div>
   )
 }