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

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx

@@ -38,6 +38,7 @@ export function RoomListItem({
 
   return (
     <li className={classNames}>
+      <div className={styles.imageAndDetails}>
         <RoomImage
           roomType={room.roomType}
           roomTypeCode={room.roomTypeCode}
@@ -47,7 +48,7 @@ export function RoomListItem({
           hotelId={hotelId}
         />
         <Details roomInfo={room.roomInfo} />
-
+      </div>
       <div className={styles.container}>
         {room.status === AvailabilityEnum.NotAvailable ? (
           <RoomNotAvailable />

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 {