fix: handle card grids in css instead of js

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