From 71685c24f45d925c672860ba9979e3ef2d547e7d Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 10 Dec 2024 11:49:31 +0100
Subject: [PATCH] fix(SW-1143) improvements on Skeleton

---
 .../HotelCard/HotelCardSkeleton.module.css                 | 7 ++++++-
 .../HotelReservation/HotelCard/HotelCardSkeleton.tsx       | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/HotelReservation/HotelCard/HotelCardSkeleton.module.css b/components/HotelReservation/HotelCard/HotelCardSkeleton.module.css
index 2305130c7..1d757cebf 100644
--- a/components/HotelReservation/HotelCard/HotelCardSkeleton.module.css
+++ b/components/HotelReservation/HotelCard/HotelCardSkeleton.module.css
@@ -45,7 +45,9 @@
   }
 
   .text {
-    display: block;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
   }
 
   .card {
@@ -55,4 +57,7 @@
     width: 315px;
     height: 100%;
   }
+  .priceVariants {
+    max-width: 260px;
+  }
 }
diff --git a/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx b/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx
index 9c62f413a..341857247 100644
--- a/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx
+++ b/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx
@@ -19,7 +19,7 @@ export function HotelCardSkeleton() {
           <SkeletonShimmer height={"20px"} />
         </div>
         <SkeletonShimmer height={"56px"} />
-        <SkeletonShimmer height={"52px"} />
+        <SkeletonShimmer height={"52px"} width={"150px"} />
       </div>
 
       <div className={styles.priceVariants}>
@@ -27,6 +27,7 @@ export function HotelCardSkeleton() {
         {Array.from({ length: 2 }).map((_, index) => (
           <SkeletonShimmer key={index} height={"100px"} />
         ))}
+        <SkeletonShimmer height={"40px"} />
       </div>
     </article>
   )