From 7f8a8e27a9fd274983676292e08563371a799cdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 11:01:41 +0200
Subject: [PATCH] fix(SW-194): update css on Rooms

---
 .../ContentType/HotelPage/Rooms/index.tsx     | 34 ++++++++-----------
 .../HotelPage/Rooms/rooms.module.css          |  8 ++---
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index 644bc93b6..e75d578fb 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -61,25 +61,21 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable>
-        {mappedRooms.map(
-          ({ id, images, title, subtitle, popularChoice }, index) => (
-            <div
-              key={id}
-              className={
-                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
-              }
-            >
-              <RoomCard
-                id={id}
-                images={images}
-                title={title}
-                subtitle={subtitle}
-                badgeTextTransKey={popularChoice ? "Popular choice" : null}
-              />
-            </div>
-          )
-        )}
+      <Grids.Stackable className={styles.grid}>
+        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
+          <div
+            key={id}
+            className={`${allRoomsVisible ? styles.allVisible : ""}`}
+          >
+            <RoomCard
+              id={id}
+              images={images}
+              title={title}
+              subtitle={subtitle}
+              badgeTextTransKey={popularChoice ? "Popular choice" : null}
+            />
+          </div>
+        ))}
       </Grids.Stackable>
 
       {showToggleButton ? (
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
index 1f719b1d2..1d79309c0 100644
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ b/components/ContentType/HotelPage/Rooms/rooms.module.css
@@ -13,10 +13,10 @@
   justify-content: center;
 }
 
-.hiddenRoomCard {
-  display: none;
-}
-
 .showMoreButton.showLess .chevron {
   transform: rotate(180deg);
 }
+
+.grid :not(.allVisible):nth-child(n + 4) {
+  display: none;
+}