From 0a513fce9ca9dc5144ca26d27dc9e228bdc9d074 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 13 Nov 2025 13:53:36 +0000
Subject: [PATCH] Merged in feat/book-566-select-rate-design (pull request
 #3156)

feat(BOOK-566): align rates if room title breaks on two rows

* feat(BOOK-566): align rates if room title breaks on two rows


Approved-by: Anton Gunnarsson
---
 .../Rooms/RoomsList/RoomListItem/index.tsx    | 21 ++++++++++---------
 .../RoomListItem/roomListItem.module.css      | 11 ++++++++--
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
index 8f72f53c4..617664be9 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
@@ -38,16 +38,17 @@ export function RoomListItem({
 
   return (
     <li className={classNames}>
-      <RoomImage
-        roomType={room.roomType}
-        roomTypeCode={room.roomTypeCode}
-        roomsLeft={room.roomsLeft}
-        selectedPackages={selectedPackages.map((pkg) => pkg.code)}
-        images={room.roomInfo.images ?? []}
-        hotelId={hotelId}
-      />
-      <Details roomInfo={room.roomInfo} />
-
+      <div className={styles.imageAndDetails}>
+        <RoomImage
+          roomType={room.roomType}
+          roomTypeCode={room.roomTypeCode}
+          roomsLeft={room.roomsLeft}
+          selectedPackages={selectedPackages.map((pkg) => pkg.code)}
+          images={room.roomInfo.images ?? []}
+          hotelId={hotelId}
+        />
+        <Details roomInfo={room.roomInfo} />
+      </div>
       <div className={styles.container}>
         {room.status === AvailabilityEnum.NotAvailable ? (
           <RoomNotAvailable />
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
index 08ace1910..5181faab6 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
@@ -3,13 +3,19 @@
   background-color: #fff;
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-lg);
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   font-size: 14px;
-  gap: var(--Space-x15);
   padding: 0 var(--Space-x2) var(--Space-x2);
   position: relative;
 }
 
+.imageAndDetails {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
 div[data-multiroom="true"] .listItem {
   border: none;
   padding: 0;
@@ -17,6 +23,7 @@ div[data-multiroom="true"] .listItem {
 
 .listItem.noAvailability {
   opacity: 0.6;
+  justify-content: flex-start;
 }
 
 .container {