scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/book-566-select-rate-design (pull request #3156)

Browse Source 
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
This commit is contained in:
Linus Flood
2025-11-13 13:53:36 +00:00
parent 6ed5dd1394
commit 0a513fce9c
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 />

11
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
View File

@@ -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 {