From 42b039c4efec30448426099598e358b341e1fc07 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 27 Nov 2025 06:12:55 +0000
Subject: [PATCH] Merged in fix/STAY-37-arrow-margin (pull request #3236)

Fix/STAY-37 arrow margin

* fix: mobile padding on button

* fix: remove deprecated button and fix border radius on booking widget button


Approved-by: Erik Tiekstra
---
 .../MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx      | 9 ++++-----
 .../HotelReservation/MyStay/Rooms/SingleRoom/index.tsx   | 4 +++-
 .../MyStay/Rooms/SingleRoom/room.module.css              | 8 ++++++++
 .../BookingWidget/MobileToggleButton/button.module.css   | 3 ++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
index 80b47bd51..8a63efa9d 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
@@ -3,8 +3,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -29,10 +29,9 @@ export default function RoomDetailsSidePeek({
   return (
     <>
       <Button
-        intent="text"
-        size="small"
-        theme="base"
-        variant="icon"
+        variant="Text"
+        size="Small"
+        color="Primary"
         wrapping
         onPress={() => {
           setIsOpen(true)
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
index ba6f4b3a7..74a5ef98d 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
@@ -74,7 +74,9 @@ export default function SingleRoom({ user }: RoomProps) {
             </div>
             <BookingInformation />
           </div>
-          <PriceDetails />
+          <div className={styles.priceDetailsButton}>
+            <PriceDetails />
+          </div>
           <div className={styles.guestDetailsMobileWrapper}>
             <GuestDetails
               refId={refId}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
index c155dd0f6..151bada45 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
@@ -57,6 +57,10 @@
   display: none;
 }
 
+.priceDetailsButton {
+  padding: 0 var(--Space-x2);
+}
+
 @media (min-width: 768px) {
   .room {
     background-color: transparent;
@@ -86,4 +90,8 @@
     display: block;
     margin-top: auto;
   }
+
+  .priceDetailsButton {
+    padding: 0;
+  }
 }
diff --git a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
index 61aaa2011..7f0404071 100644
--- a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
@@ -14,7 +14,8 @@
   /* To avoid this "flash" the styling is set to transparent) */
   /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
   -webkit-tap-highlight-color: transparent;
-  border-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 .complete {