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

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 {

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;
+  text-align: right;
-  align-items: flex-start;
-  gap: var(--Space-x05);
 }

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>
+        <span className={styles.guaranteeInfo}>
+          <GuaranteeInfoModal />
           {intl.formatMessage({
             id: "myStay.roomHeldAfter18",
             defaultMessage: "Room held after 18:00",
           })}
-          </p>
+        </span>
       </Typography>
     </div>
-    </div>
   )
 }