Merged in fix/book-751-booking-widget-tablet-skeleton (pull request #3454)

fix(BOOK-751): added missing padding to tablet booking widget skeleton

* fix(BOOK-751): added missing padding to tablet booking widget skeleton


Approved-by: Bianca Widstam
Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx

@@ -40,6 +40,7 @@ export function VoucherSkeleton() {
   })
 
   return (
+    <div className={styles.skeletonContainer}>
       <div className={styles.optionsContainer}>
         {config.bookingCodeEnabled && (
           <div className={styles.voucherSkeletonContainer}>
@@ -63,5 +64,6 @@ export function VoucherSkeleton() {
           </div>
         </Typography>
       </div>
+    </div>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css

@@ -54,6 +54,9 @@
   .showOnTablet {
     display: flex;
   }
+  .skeletonContainer {
+    padding: var(--Space-x2) 0;
+  }
 }
 
 @media screen and (min-width: 1367px) {

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -171,6 +171,7 @@ export function BookingWidgetFormContentSkeleton() {
 
   return (
     <div className={styles.input}>
+      <div className={styles.inputRow}>
         <div className={styles.inputContainer}>
           <div className={styles.where}>
             <SearchSkeleton />
@@ -217,6 +218,7 @@ export function BookingWidgetFormContentSkeleton() {
             iconName="search"
           />
         </div>
+      </div>
       <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <VoucherSkeleton />
       </div>