fix: refactor breadcrumbs to take page type variants to better match margins

components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css

@@ -11,10 +11,12 @@
 .bottomSheet {
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
-    var(--Spacing-x3);
+  padding: var(--Spacing-x2) 0 var(--Spacing-x5);
   align-items: flex-start;
   transition: 0.5s ease-in-out;
+  max-width: var(--max-width-page);
+  width: 100%;
+  margin: 0 auto;
 }
 
 .priceDetailsButton {
@@ -25,6 +27,7 @@
   transition: padding 0.5s ease-in-out;
   cursor: pointer;
   white-space: nowrap;
+  padding: 0;
 }
 
 .wrapper[data-open="true"] {
@@ -51,6 +54,12 @@
   overflow: hidden;
 }
 
+@media screen and (min-width: 768px) {
+  .bottomSheet {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x7);
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -37,7 +37,8 @@
 
   .listingContainer {
     background-color: var(--Base-Surface-Secondary-light-Normal);
-    padding: var(--Spacing-x3) var(--Spacing-x4);
+    padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
+      var(--Layout-Tablet-Margin-Margin-min);
     overflow-y: auto;
     min-width: 420px;
     width: 420px;
@@ -59,3 +60,10 @@
     gap: var(--Spacing-x2);
   }
 }
+
+@media (min-width: 1367px) {
+  .listingContainer {
+    padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
+      var(--Layout-Desktop-Margin-Margin-min);
+  }
+}

components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

@@ -12,15 +12,18 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
   return (
     <div className={styles.skeletonContainer}>
       <header className={styles.header}>
-        <div className={styles.breadcrumbs}>
-          <SkeletonShimmer height={"25px"} width={"300px"} />
-        </div>
-        <div className={styles.title}>
-          <div className={styles.cityInformation}>
-            <SkeletonShimmer height={"25px"} width={"200px"} />
+        <div className={styles.headerContent}>
+          <div className={styles.breadcrumbs}>
+            <SkeletonShimmer height={"25px"} width={"300px"} />
           </div>
-          <div className={styles.sorter}>
-            <SkeletonShimmer height={"60px"} width={"100%"} />
+
+          <div className={styles.title}>
+            <div className={styles.cityInformation}>
+              <SkeletonShimmer height={"25px"} width={"200px"} />
+            </div>
+            <div className={styles.sorter}>
+              <SkeletonShimmer height={"60px"} width={"100%"} />
+            </div>
           </div>
         </div>
       </header>

components/HotelReservation/SelectHotel/index.tsx

@@ -133,17 +133,19 @@ export default async function SelectHotel({
   return (
     <>
       <header className={styles.header}>
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-        <div className={styles.title}>
-          <div className={styles.cityInformation}>
-            <Subtitle>{city.name}</Subtitle>
-            <HotelCount />
-          </div>
-          <div className={styles.sorter}>
-            <HotelSorter discreet />
+        <div className={styles.headerContent}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+          <div className={styles.title}>
+            <div className={styles.cityInformation}>
+              <Subtitle>{city.name}</Subtitle>
+              <HotelCount />
+            </div>
+            <div className={styles.sorter}>
+              <HotelSorter discreet />
+            </div>
           </div>
+          <MobileMapButtonContainer filters={filterList} />
         </div>
-        <MobileMapButtonContainer filters={filterList} />
       </header>
       <main className={styles.main}>
         <div className={styles.sideBar}>

components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -1,21 +1,25 @@
 .main {
   display: flex;
-  padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   margin: 0 auto;
 }
 
 .header {
+  padding: var(--Spacing-x3) 0 var(--Spacing-x2);
+}
+
+.headerContent {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
-.header nav {
+.headerContent nav {
   display: none;
 }
 
@@ -70,16 +74,18 @@
 
 @media (min-width: 768px) {
   .main {
-    padding: var(--Spacing-x5);
-  }
-  .header {
-    display: block;
-    background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-      var(--Spacing-x5);
+    padding: var(--Spacing-x5) 0;
   }
 
-  .header nav {
+  .headerContent {
+    display: block;
+  }
+  .header {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x4) 0 var(--Spacing-x3);
+  }
+
+  .headerContent nav {
     display: block;
     max-width: var(--max-width-navigation);
     padding: 0;

components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css

@@ -1,12 +1,12 @@
 .container {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Spacing-x3) 0;
 }
 
 .wrapper {
   display: flex;
   margin: 0 auto;
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   position: relative;
   flex-direction: column;
   gap: var(--Spacing-x2);
@@ -62,11 +62,17 @@
 }
 
 .hotelAlert {
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   padding-top: var(--Spacing-x-one-and-half);
 }
 
+@media screen and (min-width: 768px) {
+  .container {
+    padding: var(--Spacing-x4) 0;
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .container {
     padding: var(--Spacing-x4) var(--Spacing-x5);

components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css

@@ -13,7 +13,7 @@
 
 .content {
   width: 100%;
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: row;
   gap: var(--Spacing-x4);
-  padding: var(--Spacing-x2) var(--Spacing-x3) 0;
+  padding-top: var(--Spacing-x2);
   width: 100%;
 }
 
@@ -72,7 +72,7 @@
 
 @media (min-width: 768px) {
   .summary {
-    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+    padding: var(--Spacing-x3) 0 var(--Spacing-x5);
   }
   .content {
     flex-direction: row;

components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.module.css

@@ -1,7 +1,6 @@
 .container {
-  padding: var(--Spacing-x2);
   margin: 0 auto;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
 }
 
 .filterContainer {

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -1,8 +1,8 @@
 .content {
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x2) 0;
 }