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>
   )
 }