fix: handle card grids in css instead of js

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -12,10 +12,6 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import { getIconForFeatureCode } from "../../utils"
-import {
-  RATE_CARDS_AVAILABLE_HEIGHT_CLASS,
-  RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS,
-} from "../utils"
 import { cardVariants } from "./cardVariants"
 
 import styles from "./roomCard.module.css"
@@ -115,7 +111,7 @@ export default function RoomCard({
   })
 
   return (
-    <div className={classNames}>
+    <li className={classNames}>
       <div>
         <div className={styles.imageContainer}>
           <div className={styles.chipContainer}>
@@ -186,9 +182,7 @@ export default function RoomCard({
             */}
         </div>
       </div>
-      <div
-        className={`${styles.container}  ${roomConfiguration.status === "NotAvailable" ? RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS : RATE_CARDS_AVAILABLE_HEIGHT_CLASS}`}
-      >
+      <div className={styles.container}>
         <Caption color="uiTextHighContrast" type="bold">
           {getBreakfastMessage(rates.flexRate)}
         </Caption>
@@ -204,23 +198,21 @@ export default function RoomCard({
             </div>
           </div>
         ) : (
-          <div className={styles.flexibilityOptions}>
-            {Object.entries(rates).map(([key, rate]) => (
-              <FlexibilityOption
-                key={key}
-                name={rateKey(key)}
-                value={key.toLowerCase()}
-                paymentTerm={key === "flexRate" ? payLater : payNow}
-                product={findProductForRate(rate)}
-                priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
-                handleSelectRate={handleSelectRate}
-                roomTypeCode={roomConfiguration.roomTypeCode}
-                petRoomPackage={petRoomPackage}
-              />
-            ))}
-          </div>
+          Object.entries(rates).map(([key, rate]) => (
+            <FlexibilityOption
+              key={key}
+              name={rateKey(key)}
+              value={key.toLowerCase()}
+              paymentTerm={key === "flexRate" ? payLater : payNow}
+              product={findProductForRate(rate)}
+              priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
+              handleSelectRate={handleSelectRate}
+              roomTypeCode={roomConfiguration.roomTypeCode}
+              petRoomPackage={petRoomPackage}
+            />
+          ))
         )}
       </div>
-    </div>
+    </li>
   )
 }

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -1,13 +1,14 @@
 .card {
   font-size: 14px;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
   background-color: #fff;
   border-radius: var(--Corner-radius-Large);
   border: 1px solid var(--Base-Border-Subtle);
   position: relative;
-  height: 100%;
   justify-content: space-between;
+  grid-row: span 5;
 }
 
 .card.noAvailability {
@@ -38,9 +39,16 @@
 
 .container {
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: subgrid;
   gap: var(--Spacing-x-one-and-half);
+  grid-row: span 4;
+}
+
+/* Make sure rows with only unavailable rooms still has a min-height */
+.container:has(.noRoomsContainer) {
+  min-height: 400px;
+  grid-template-rows: auto repeat(3, 1fr);
 }
 
 .roomDetails {
@@ -62,9 +70,9 @@
 }
 
 .flexibilityOptions {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Spacing-x2);
+  grid-template-rows: repeat(3, 1fr);
 }
 
 .chipContainer {
@@ -89,14 +97,16 @@
 }
 
 .noRoomsContainer {
-  padding: var(--Spacing-x2);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-Medium);
-  margin: 0;
+  height: 100%;
   width: 100%;
 }
 
 .noRooms {
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  margin: 0;
+
   display: flex;
   gap: var(--Spacing-x1);
 }