Merged in fix/BOOK-700-skeleton-misaligned-select-hotel (pull request #3391)

fix(BOOK-700): skeleton styling disoriented on select hotel

* fix(BOOK-700): skeleton styling disoriented on select hotel


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx

@@ -23,19 +23,21 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
         </div>
       </header>
       <main className={styles.main}>
-        <div className={styles.sideBar}>
+        <div className={styles.availabilityContainer}>
-          <div className={styles.sideBarItem}>
+          <div className={styles.sideBar}>
-            <SkeletonShimmer height="280px" width="340px" />
+            <div className={styles.sideBarItem}>
+              <SkeletonShimmer height="280px" width="340px" />
+            </div>
+            <div className={styles.sideBarItem}>
+              <SkeletonShimmer height="400px" width="340px" />
+            </div>
           </div>
-          <div className={styles.sideBarItem}>
+          <div className={styles.hotelList}>
-            <SkeletonShimmer height="400px" width="340px" />
+            {Array.from({ length: count }).map((_, index) => (
+              <HotelCardSkeleton key={index} />
+            ))}
           </div>
         </div>
-        <div className={styles.hotelList}>
-          {Array.from({ length: count }).map((_, index) => (
-            <HotelCardSkeleton key={index} />
-          ))}
-        </div>
       </main>
     </div>
   )