fix(SW-1143) improvements on Skeleton

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

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