From 932413412b4279b820ddc697ae9b8501382be2ac Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Wed, 7 Jan 2026 11:20:51 +0000
Subject: [PATCH] Merged in fix/BOOK-700-skeleton-misaligned-select-hotel (pull
 request #3391)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../SelectHotel/SelectHotelSkeleton.tsx       | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx b/packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx
index fafb68c97..de52d3ca1 100644
--- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelSkeleton.tsx
+++ b/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.sideBarItem}>
-            <SkeletonShimmer height="280px" width="340px" />
+        <div className={styles.availabilityContainer}>
+          <div className={styles.sideBar}>
+            <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}>
-            <SkeletonShimmer height="400px" width="340px" />
+          <div className={styles.hotelList}>
+            {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>
   )