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

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -5,13 +5,14 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
 import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, PageArgs } from "@/types/params"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
   return (
     <Suspense fallback={<BreadcrumbsSkeleton />}>
-      <Breadcrumbs />
+      <Breadcrumbs variant={PageContentTypeEnum.accountPage} />
     </Suspense>
   )
 }

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -1,15 +1,18 @@
 .blocks {
   display: grid;
   gap: var(--Spacing-x5);
-  padding-left: var(--Spacing-x2);
+  max-width: var(--max-width-page);
-  padding-right: var(--Spacing-x2);
   align-content: flex-start;
 }
 
+@media screen and (min-width: 768px) {
+  .blocks {
+    gap: var(--Spacing-x7);
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .blocks {
     gap: var(--Spacing-x7);
-    padding-left: var(--Spacing-x0);
-    padding-right: var(--Spacing-x0);
   }
 }

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -1,11 +1,11 @@
 .layout {
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
-  gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   min-height: 100dvh;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   margin: 0 auto;
+  width: 100%;
 }
 
 .container {
@@ -15,8 +15,6 @@
 .content {
   display: grid;
   padding-bottom: var(--Spacing-x9);
-  padding-left: var(--Spacing-x0);
-  padding-right: var(--Spacing-x0);
   position: relative;
 }
 
@@ -24,7 +22,5 @@
   .content {
     gap: var(--Spacing-x5);
     grid-template-columns: max(340px) 1fr;
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
   }
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -5,18 +5,20 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
 import { setLang } from "@/i18n/serverContext"
 
 import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default function PageBreadcrumbs({
   params,
 }: PageArgs<LangParams & ContentTypeParams>) {
   setLang(params.lang)
 
-  if (params.contentType === "hotel-page") {
+  if (params.contentType === PageContentTypeEnum.hotelPage) {
     return null
   }
+
   return (
     <Suspense fallback={<BreadcrumbsSkeleton />}>
-      <Breadcrumbs />
+      <Breadcrumbs variant={params.contentType} />
     </Suspense>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css

@@ -1,7 +1,6 @@
 .layout {
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
-  gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   position: relative;
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -17,6 +17,7 @@ import type {
   PageArgs,
   UIDParams,
 } from "@/types/params"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
@@ -28,12 +29,12 @@ export default async function ContentTypePage({
   const pathname = headers().get("x-pathname") || ""
 
   switch (params.contentType) {
-    case "collection-page":
+    case PageContentTypeEnum.collectionPage:
       if (env.HIDE_FOR_NEXT_RELEASE) {
         return notFound()
       }
       return <CollectionPage />
-    case "content-page": {
+    case PageContentTypeEnum.contentPage: {
       const isSignupRoute = isSignupPage(pathname)
 
       if (env.HIDE_FOR_NEXT_RELEASE) {
@@ -52,9 +53,9 @@ export default async function ContentTypePage({
 
       return <ContentPage />
     }
-    case "loyalty-page":
+    case PageContentTypeEnum.loyaltyPage:
       return <LoyaltyPage />
-    case "hotel-page":
+    case PageContentTypeEnum.hotelPage:
       if (env.HIDE_FOR_NEXT_RELEASE) {
         return notFound()
       }

app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx

@@ -5,6 +5,7 @@ import BookingWidget, { preload } from "@/components/BookingWidget"
 import { getLang } from "@/i18n/serverContext"
 
 import type { ContentTypeParams, PageArgs } from "@/types/params"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default async function BookingWidgetPage({
   params,
@@ -16,7 +17,7 @@ export default async function BookingWidgetPage({
 
   const urlParams = new URLSearchParams()
 
-  if (params.contentType === "hotel-page") {
+  if (params.contentType === PageContentTypeEnum.hotelPage) {
     const hotelPageData = await getHotelPage()
 
     const hotelData = await getHotelData({

app/globals.css

@@ -100,7 +100,7 @@
   --current-max-width: 113.5rem;
 
   --max-width: 94.5rem;
-  --max-width-content: 74.75rem;
+  --max-width-content: min(calc(100dvw - var(--max-width-spacing)), 74.75rem);
   --max-width-text-block: 49.5rem;
   --current-mobile-site-header-height: 52.41px;
   --max-width-navigation: 89.5rem;

components/Breadcrumbs/index.tsx

@@ -3,7 +3,11 @@ import { serverClient } from "@/lib/trpc/server"
 import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs"
 import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
 
-export default async function Breadcrumbs() {
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
+export default async function Breadcrumbs({
+  variant,
+}: Pick<BreadcrumbsProps, "variant">) {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
 
   if (!breadcrumbs?.length) {
@@ -19,7 +23,7 @@ export default async function Breadcrumbs() {
           __html: JSON.stringify(jsonSchema.jsonLd),
         }}
       />
-      <BreadcrumbsComp breadcrumbs={breadcrumbs} />
+      <BreadcrumbsComp breadcrumbs={breadcrumbs} variant={variant} />
     </>
   )
 }

components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -3,7 +3,7 @@
   gap: 8px;
   position: relative;
   width: 100%;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
+  padding: 0 var(--Spacing-x2);
   z-index: 0;
 }
 
@@ -14,6 +14,8 @@
   height: 100%;
   max-height: 30vh;
   cursor: pointer;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .imageWrapper > :nth-child(2),
@@ -28,6 +30,12 @@
   z-index: 1;
 }
 
+@media screen and (min-width: 768px) {
+  .seeAllButton {
+    right: calc(var(--Spacing-x2) + var(--Layout-Tablet-Margin-Margin-min));
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .imageWrapper {
     grid-template-columns: 70% 30%;
@@ -35,7 +43,7 @@
     grid-template-areas:
       "main side1"
       "main side2";
-    padding: var(--Spacing-x2) var(--Spacing-x5) 0;
+    padding: 0 var(--Spacing-x5);
   }
 
   .image {

components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -12,9 +12,10 @@
   display: flex;
   gap: var(--Spacing-x4);
   justify-content: flex-start;
-  padding: 0 var(--Spacing-x2);
   width: 100%;
   overflow-x: auto;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 @media screen and (min-width: 768px) {
@@ -28,5 +29,6 @@
     padding: 0 var(--Spacing-x5);
     max-width: calc(100% - var(--hotel-page-map-desktop-width));
     overflow-x: visible;
+    margin: 0;
   }
 }

components/ContentType/HotelPage/hotelPage.module.css

@@ -13,7 +13,6 @@
     "tabNavigation"
     "mainSection"
     "mapContainer";
-  margin: 0 auto;
   max-width: var(--max-width);
 }
 
@@ -26,7 +25,9 @@
   grid-area: mainSection;
   display: grid;
   gap: var(--Spacing-x9);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Spacing-x4) 0;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .mapContainer {
@@ -51,6 +52,17 @@
   gap: var(--Spacing-x2);
 }
 
+@media screen and (min-width: 768px) {
+  .pageContainer {
+    margin: 0 auto;
+  }
+
+  .mainSection {
+    max-width: 100%;
+    padding: var(--Spacing-x6) var(--Layout-Tablet-Margin-Margin-min);
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
@@ -61,7 +73,7 @@
   }
   .mainSection {
     grid-area: mainSection;
-    padding: var(--Spacing-x6) var(--Spacing-x4);
+    padding: var(--Spacing-x6) var(--Layout-Desktop-Margin-Margin-min);
   }
   .mapContainer {
     display: flex;

components/ContentType/HotelPage/index.tsx

@@ -42,6 +42,7 @@ import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
 import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import type { Facility } from "@/types/hotel"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default async function HotelPage({ hotelId }: HotelPageProps) {
   const lang = getLang()
@@ -122,7 +123,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
       />
       <header className={styles.header}>
         <Suspense fallback={<BreadcrumbsSkeleton />}>
-          <Breadcrumbs />
+          <Breadcrumbs variant={PageContentTypeEnum.hotelPage} />
         </Suspense>
         {images?.length ? (
           <PreviewImages images={images} hotelName={name} />

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -3,8 +3,8 @@
   grid-template-areas: "main";
   grid-template-columns: 1fr;
   gap: var(--Spacing-x5);
-  padding: 0 var(--Spacing-x2) var(--Spacing-x9);
+  padding-bottom: var(--Spacing-x9);
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   width: 100%;
 }
@@ -27,10 +27,6 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .content {
-    padding: 0 var(--Spacing-x5) var(--Spacing-x9);
-  }
-
   .content:has(> aside) {
     grid-template-areas: "sidebar main";
     grid-template-columns: 360px 1fr;

components/ContentType/StaticPages/staticPage.module.css

@@ -4,7 +4,7 @@
 
 .header {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Spacing-x4) 0;
 }
 
 .headerContent {
@@ -32,9 +32,9 @@
 }
 
 .contentContainer {
+  padding-top: var(--Spacing-x4);
+  width: 100%;
   padding: var(--Spacing-x4) var(--Spacing-x2) 0;
-  max-width: var(--max-width-content);
-  margin: 0 auto;
 }
 
 .content .contentContainer {
@@ -48,9 +48,10 @@
 
 .mainContent {
   display: grid;
-  gap: var(--Spacing-x4);
   width: 100%;
   gap: var(--Spacing-x6);
+  margin: 0 auto;
+  max-width: var(--max-width-content);
 }
 
 .content .mainContent {
@@ -58,9 +59,21 @@
 }
 
 @media (min-width: 768px) {
+  .contentContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .heroContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
   .headerIntro {
     gap: var(--Spacing-x3);
   }
+
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
 }
 
 @media (min-width: 1367px) {
@@ -70,6 +83,8 @@
 
   .contentContainer {
     padding: var(--Spacing-x4) 0 0;
+    max-width: var(--max-width-content);
+    margin: 0 auto;
   }
 
   .content .contentContainer {
@@ -80,5 +95,8 @@
 
   .mainContent {
     gap: var(--Spacing-x9);
+    padding: 0;
+    max-width: none;
+    margin: 0;
   }
 }

components/Current/NotFound/notFound.module.css

@@ -10,7 +10,7 @@
   position: relative;
   text-align: center;
   box-sizing: content-box;
-  max-width: 1200px;
+  max-width: var(--max-width-page);
   margin: 0 auto;
   padding: 70px 30px;
 }

components/Footer/Details/details.module.css

@@ -1,20 +1,23 @@
 .details {
   background: var(--Base-Text-High-contrast);
   color: var(--Primary-Dark-On-Surface-Text);
-  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6);
+  padding: var(--Spacing-x3) 0 var(--Spacing-x6);
 }
 
 .topContainer {
   display: flex;
   justify-content: space-between;
   padding-bottom: var(--Spacing-x2);
-  margin-bottom: var(--Spacing-x2);
+  max-width: var(--max-width-page);
+  margin: 0 auto var(--Spacing-x2);
 }
 
 .bottomContainer {
   display: flex;
   justify-content: space-between;
   flex-direction: column-reverse;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .socialNav {
@@ -55,7 +58,7 @@
 
 @media screen and (min-width: 767px) {
   .details {
-    padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
+    padding: var(--Spacing-x6) 0 var(--Spacing-x4);
   }
 
   .bottomContainer {

components/Footer/Navigation/navigation.module.css

@@ -1,6 +1,6 @@
 .section {
   background: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x7) var(--Spacing-x2);
+  padding: var(--Spacing-x7) 0;
 }
 
 .maxWidth {
@@ -8,12 +8,12 @@
   display: flex;
   justify-content: space-between;
   flex-direction: column;
-  max-width: var(--max-width-content);
+  max-width: var(--max-width-page);
 }
 
 @media screen and (min-width: 767px) {
   .section {
-    padding: var(--Spacing-x9) var(--Spacing-x5);
+    padding: var(--Spacing-x9) 0;
   }
 }
 

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -104,10 +104,11 @@
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
   .inputContainer {
-    padding: var(--Spacing-x2) var(--Spacing-x2);
+    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
+      var(--Layout-Tablet-Margin-Margin-min);
   }
   .buttonContainer {
-    padding-right: var(--Spacing-x2);
+    padding-right: var(--Layout-Tablet-Margin-Margin-min);
   }
   .input .buttonContainer .button {
     padding: var(--Spacing-x1);
@@ -125,7 +126,7 @@
     display: flex;
     background: var(--Base-Surface-Primary-light-Hover);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-    padding: var(--Spacing-x2);
+    padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
   }
   .voucherContainer {
     display: none;

components/Forms/BookingWidget/form.module.css

@@ -2,15 +2,11 @@
   align-items: center;
   display: grid;
   margin: 0 auto;
-  width: min(
+  width: 100dvw;
-    calc(100dvw - (var(--Spacing-x2) * 2)),
-    var(--max-width-navigation)
-  );
 }
 
 .form {
   display: grid;
-  width: 100%;
 }
 
 @media screen and (max-width: 767px) {
@@ -20,11 +16,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .section {
-    display: flex;
-    width: 100%;
-  }
-
   .default {
     border-radius: var(--Corner-radius-Medium);
   }
@@ -36,14 +27,12 @@
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
 
-  .section {
-    width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
-      var(--max-width-navigation)
-    );
-  }
-
   .full {
     padding: var(--Spacing-x1) 0;
   }
+  .form {
+    width: 100%;
+    max-width: var(--max-width-page);
+    margin: 0 auto;
+  }
 }

components/Header/MainMenu/MainMenuButton/menuButton.module.css

@@ -6,7 +6,7 @@
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
   border-width: 0;
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  padding: var(--Spacing-x-half) 0;
   cursor: pointer;
   font-family: var(--typography-Body-Bold-fontFamily);
   font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */

components/Header/MainMenu/mainMenu.module.css

@@ -1,6 +1,6 @@
 .mainMenu {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x2) 0;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }
 
@@ -12,6 +12,8 @@
   grid-template-columns: max-content 1fr;
   align-items: center;
   gap: var(--Spacing-x2);
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .menus {
@@ -31,6 +33,9 @@
 }
 
 @media screen and (min-width: 768px) {
+  .mainMenu {
+    padding: var(--Spacing-x2) 0;
+  }
   .nav {
     display: flex;
     justify-content: space-between;

components/Header/TopMenu/topMenu.module.css

@@ -1,11 +1,11 @@
 .topMenu {
   display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x2) 0;
 }
 
 .content {
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   margin: 0 auto;
 }
 

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)
+  padding: var(--Spacing-x2) 0 var(--Spacing-x5);
-    var(--Spacing-x3);
   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}>
+        <div className={styles.headerContent}>
-          <SkeletonShimmer height={"25px"} width={"300px"} />
+          <div className={styles.breadcrumbs}>
-        </div>
+            <SkeletonShimmer height={"25px"} width={"300px"} />
-        <div className={styles.title}>
-          <div className={styles.cityInformation}>
-            <SkeletonShimmer height={"25px"} width={"200px"} />
           </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.headerContent}>
-        <div className={styles.title}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
-          <div className={styles.cityInformation}>
+          <div className={styles.title}>
-            <Subtitle>{city.name}</Subtitle>
+            <div className={styles.cityInformation}>
-            <HotelCount />
+              <Subtitle>{city.name}</Subtitle>
-          </div>
+              <HotelCount />
-          <div className={styles.sorter}>
+            </div>
-            <HotelSorter discreet />
+            <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);
+    padding: var(--Spacing-x5) 0;
-  }
-  .header {
-    display: block;
-    background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-      var(--Spacing-x5);
   }
 
-  .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;
 }

components/TempDesignSystem/Alert/alert.module.css

@@ -11,7 +11,7 @@
 
 .content {
   width: 100%;
-  max-width: var(--max-width-navigation);
+  max-width: var(--max-width-page);
   margin: 0 auto;
   display: flex;
   gap: var(--Spacing-x2);
@@ -60,7 +60,6 @@
 
 /* Intent: banner */
 .banner {
-  padding: 0 var(--Spacing-x3);
   border-left-width: 6px;
   border-left-style: solid;
 }
@@ -90,9 +89,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .banner {
-    padding: 0 var(--Spacing-x5);
-  }
   .innerContent {
     flex-direction: row;
     align-items: center;

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,17 +1,35 @@
 .breadcrumbs {
   display: block;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
+  padding: var(--Spacing-x4) 0 var(--Spacing-x3);
-  max-width: var(--max-width);
   margin: 0 auto;
   width: 100%;
 }
 
+.contentWidth.breadcrumbs {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding-bottom: 0;
+}
+
+.hotelHeaderWidth.breadcrumbs {
+  max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
+}
+
+.fullWidth .list {
+  max-width: var(--max-width-navigation);
+}
+
+.contentWidth .list {
+  max-width: var(--max-width-content);
+}
+
 .list {
   align-items: center;
   display: flex;
   gap: var(--Spacing-x-quarter);
   justify-content: flex-start;
   list-style: none;
+  margin: 0 auto;
+  max-width: var(--max-width-page);
 }
 
 .listItem {
@@ -23,10 +41,3 @@
 .homeLink {
   display: flex;
 }
-
-@media screen and (min-width: 1367px) {
-  .breadcrumbs {
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
-  }
-}

components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

@@ -1,9 +1,14 @@
+import type { VariantProps } from "class-variance-authority"
+
+import type { breadcrumbsVariants } from "./variants"
+
 type Breadcrumb = {
   title: string
   uid: string
   href?: string
 }
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps
+  extends VariantProps<typeof breadcrumbsVariants> {
   breadcrumbs: Breadcrumb[]
 }

components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -3,18 +3,27 @@ import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import { breadcrumbsVariants } from "./variants"
+
 import styles from "./breadcrumbs.module.css"
 
 import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
 
-export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+export default function Breadcrumbs({
+  breadcrumbs,
+  variant,
+}: BreadcrumbsProps) {
   if (!breadcrumbs?.length) {
     return null
   }
 
+  const classNames = breadcrumbsVariants({
+    variant,
+  })
+
   const homeBreadcrumb = breadcrumbs.shift()
   return (
-    <nav className={styles.breadcrumbs}>
+    <nav className={classNames}>
       <ul className={styles.list}>
         {homeBreadcrumb ? (
           <li className={styles.listItem}>

components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./breadcrumbs.module.css"
+
+import { PageContentTypeEnum } from "@/types/requests/contentType"
+
+export const breadcrumbsVariants = cva(styles.breadcrumbs, {
+  variants: {
+    variant: {
+      [PageContentTypeEnum.accountPage]: styles.fullWidth,
+      [PageContentTypeEnum.contentPage]: styles.contentWidth,
+      [PageContentTypeEnum.collectionPage]: styles.contentWidth,
+      [PageContentTypeEnum.hotelPage]: styles.hotelHeaderWidth,
+      [PageContentTypeEnum.loyaltyPage]: styles.fullWidth,
+      default: styles.fullWidth,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})

middlewares/utils.ts

@@ -1,4 +1,3 @@
-import { Lang } from "@/constants/languages"
 import { getPublicNextURL } from "@/server/utils"
 
 import { resolve as resolveEntry } from "@/utils/entry"
@@ -7,6 +6,8 @@ import { removeTrailingSlash } from "@/utils/url"
 
 import type { NextRequest } from "next/server"
 
+import type { Lang } from "@/constants/languages"
+
 export function getDefaultRequestHeaders(request: NextRequest) {
   const lang = findLang(request.nextUrl.pathname)!
   const nextUrlPublic = getPublicNextURL(request)

server/routers/contentstack/bookingwidget/query.ts

@@ -1,5 +1,3 @@
-import { ValueOf } from "next/dist/shared/lib/constants"
-
 import {
   GetAccountPageSettings,
   GetCollectionPageSettings,
@@ -15,11 +13,13 @@ import { generateTag } from "@/utils/generateTag"
 
 import {
   validateBookingWidgetToggleSchema,
-  ValidateBookingWidgetToggleType,
+  type ValidateBookingWidgetToggleType,
 } from "./output"
 import { affix as bookingwidgetAffix } from "./utils"
 
-import { ContentTypeEnum } from "@/types/requests/contentType"
+import type { ValueOf } from "next/dist/shared/lib/constants"
+
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export const bookingwidgetQueryRouter = router({
   toggle: router({
@@ -33,27 +33,27 @@ export const bookingwidgetQueryRouter = router({
         return failedResponse
       }
       let GetPageSettings = ""
-      const contentTypeCMS = <ValueOf<typeof ContentTypeEnum>>(
+      const contentTypeCMS = <ValueOf<typeof PageContentTypeEnum>>(
         contentType.replaceAll("-", "_")
       )
 
       switch (contentTypeCMS) {
-        case ContentTypeEnum.accountPage:
+        case PageContentTypeEnum.accountPage:
           GetPageSettings = GetAccountPageSettings
           break
-        case ContentTypeEnum.loyaltyPage:
+        case PageContentTypeEnum.loyaltyPage:
           GetPageSettings = GetLoyaltyPageSettings
           break
-        case ContentTypeEnum.collectionPage:
+        case PageContentTypeEnum.collectionPage:
           GetPageSettings = GetCollectionPageSettings
           break
-        case ContentTypeEnum.contentPage:
+        case PageContentTypeEnum.contentPage:
           GetPageSettings = GetContentPageSettings
           break
-        case ContentTypeEnum.hotelPage:
+        case PageContentTypeEnum.hotelPage:
           GetPageSettings = GetHotelPageSettings
           break
-        case ContentTypeEnum.currentBlocksPage:
+        case PageContentTypeEnum.currentBlocksPage:
           GetPageSettings = GetCurrentBlocksPageSettings
           break
       }

server/routers/contentstack/breadcrumbs/query.ts

@@ -28,7 +28,7 @@ import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
 import { breadcrumbsRefsSchema, breadcrumbsSchema } from "./output"
 import { getTags } from "./utils"
 
-import { PageTypeEnum } from "@/types/requests/pageType"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 import type {
   BreadcrumbsRefsSchema,
   RawBreadcrumbsSchema,
@@ -170,7 +170,7 @@ export const breadcrumbsQueryRouter = router({
     }
 
     switch (ctx.contentType) {
-      case PageTypeEnum.accountPage:
+      case PageContentTypeEnum.accountPage:
         return await getBreadcrumbs<{
           account_page: RawBreadcrumbsSchema
         }>(
@@ -181,7 +181,7 @@ export const breadcrumbsQueryRouter = router({
           },
           variables
         )
-      case PageTypeEnum.collectionPage:
+      case PageContentTypeEnum.collectionPage:
         return await getBreadcrumbs<{
           collection_page: RawBreadcrumbsSchema
         }>(
@@ -192,7 +192,7 @@ export const breadcrumbsQueryRouter = router({
           },
           variables
         )
-      case PageTypeEnum.contentPage:
+      case PageContentTypeEnum.contentPage:
         return await getBreadcrumbs<{
           content_page: RawBreadcrumbsSchema
         }>(
@@ -203,7 +203,7 @@ export const breadcrumbsQueryRouter = router({
           },
           variables
         )
-      case PageTypeEnum.hotelPage:
+      case PageContentTypeEnum.hotelPage:
         return await getBreadcrumbs<{
           hotel_page: RawBreadcrumbsSchema
         }>(
@@ -214,7 +214,7 @@ export const breadcrumbsQueryRouter = router({
           },
           variables
         )
-      case PageTypeEnum.loyaltyPage:
+      case PageContentTypeEnum.loyaltyPage:
         return await getBreadcrumbs<{
           loyalty_page: RawBreadcrumbsSchema
         }>(

server/routers/contentstack/languageSwitcher/query.ts

@@ -35,11 +35,11 @@ import { generateTag } from "@/utils/generateTag"
 import { validateLanguageSwitcherData } from "./output"
 import { languageSwitcherAffix } from "./utils"
 
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 import type {
   LanguageSwitcherData,
   LanguageSwitcherQueryDataRaw,
 } from "@/types/requests/languageSwitcher"
-import { PageTypeEnum } from "@/types/requests/pageType"
 
 interface LanguageSwitcherVariables {
   contentType: string
@@ -72,27 +72,27 @@ async function getLanguageSwitcher(options: LanguageSwitcherVariables) {
   let daDeEnDocument = null
   let fiNoSvDocument = null
   switch (options.contentType) {
-    case PageTypeEnum.accountPage:
+    case PageContentTypeEnum.accountPage:
       daDeEnDocument = GetDaDeEnUrlsAccountPage
       fiNoSvDocument = GetFiNoSvUrlsAccountPage
       break
-    case PageTypeEnum.currentBlocksPage:
+    case PageContentTypeEnum.currentBlocksPage:
       daDeEnDocument = GetDaDeEnUrlsCurrentBlocksPage
       fiNoSvDocument = GetFiNoSvUrlsCurrentBlocksPage
       break
-    case PageTypeEnum.loyaltyPage:
+    case PageContentTypeEnum.loyaltyPage:
       daDeEnDocument = GetDaDeEnUrlsLoyaltyPage
       fiNoSvDocument = GetFiNoSvUrlsLoyaltyPage
       break
-    case PageTypeEnum.hotelPage:
+    case PageContentTypeEnum.hotelPage:
       daDeEnDocument = GetDaDeEnUrlsHotelPage
       fiNoSvDocument = GetFiNoSvUrlsHotelPage
       break
-    case PageTypeEnum.contentPage:
+    case PageContentTypeEnum.contentPage:
       daDeEnDocument = GetDaDeEnUrlsContentPage
       fiNoSvDocument = GetFiNoSvUrlsContentPage
       break
-    case PageTypeEnum.collectionPage:
+    case PageContentTypeEnum.collectionPage:
       daDeEnDocument = GetDaDeEnUrlsCollectionPage
       fiNoSvDocument = GetFiNoSvUrlsCollectionPage
       break

server/routers/contentstack/metadata/query.ts

@@ -16,7 +16,7 @@ import { getHotelData } from "../../hotels/query"
 import { metadataSchema } from "./output"
 import { affix } from "./utils"
 
-import { PageTypeEnum } from "@/types/requests/pageType"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 import type { RawMetadataSchema } from "@/types/trpc/routers/contentstack/metadata"
 import type { Lang } from "@/constants/languages"
 
@@ -121,27 +121,27 @@ export const metadataQueryRouter = router({
     }
 
     switch (ctx.contentType) {
-      case PageTypeEnum.accountPage:
+      case PageContentTypeEnum.accountPage:
         const accountPageResponse = await fetchMetadata<{
           account_page: RawMetadataSchema
         }>(GetAccountPageMetadata, variables)
         return getTransformedMetadata(accountPageResponse.account_page)
-      case PageTypeEnum.collectionPage:
+      case PageContentTypeEnum.collectionPage:
         const collectionPageResponse = await fetchMetadata<{
           collection_page: RawMetadataSchema
         }>(GetCollectionPageMetadata, variables)
         return getTransformedMetadata(collectionPageResponse.collection_page)
-      case PageTypeEnum.contentPage:
+      case PageContentTypeEnum.contentPage:
         const contentPageResponse = await fetchMetadata<{
           content_page: RawMetadataSchema
         }>(GetContentPageMetadata, variables)
         return getTransformedMetadata(contentPageResponse.content_page)
-      case PageTypeEnum.loyaltyPage:
+      case PageContentTypeEnum.loyaltyPage:
         const loyaltyPageResponse = await fetchMetadata<{
           loyalty_page: RawMetadataSchema
         }>(GetLoyaltyPageMetadata, variables)
         return getTransformedMetadata(loyaltyPageResponse.loyalty_page)
-      case PageTypeEnum.hotelPage:
+      case PageContentTypeEnum.hotelPage:
         const hotelPageResponse = await fetchMetadata<{
           hotel_page: RawMetadataSchema
         }>(GetHotelPageMetadata, variables)

types/params.ts

@@ -1,4 +1,5 @@
-import { Lang } from "@/constants/languages"
+import type { Lang } from "@/constants/languages"
+import type { PageContentTypeEnum } from "./requests/contentType"
 
 export type SearchParams<S = {}> = {
   searchParams: S & { [key: string]: string }
@@ -18,10 +19,10 @@ export type StatusParams = {
 
 export type ContentTypeParams = {
   contentType:
-    | "loyalty-page"
+    | PageContentTypeEnum.loyaltyPage
-    | "content-page"
+    | PageContentTypeEnum.contentPage
-    | "hotel-page"
+    | PageContentTypeEnum.hotelPage
-    | "collection-page"
+    | PageContentTypeEnum.collectionPage
 }
 
 export type ContentTypeWebviewParams = {

types/requests/contentType.ts

@@ -1,4 +1,4 @@
-export enum ContentTypeEnum {
+export enum PageContentTypeEnum {
   accountPage = "account_page",
   loyaltyPage = "loyalty_page",
   hotelPage = "hotel_page",

types/requests/pageType.ts

@@ -1,8 +0,0 @@
-export enum PageTypeEnum {
-  accountPage = "account-page",
-  loyaltyPage = "loyalty-page",
-  hotelPage = "hotel-page",
-  contentPage = "content-page",
-  collectionPage = "collection-page",
-  currentBlocksPage = "current-blocks-page",
-}

utils/entry.ts

@@ -29,7 +29,7 @@ export async function resolve(url: string, lang = Lang.en) {
     if (value.total) {
       const { content_type_uid, uid } = value.items[0].system
       return {
-        contentType: content_type_uid.replaceAll("_", "-"),
+        contentType: content_type_uid,
         uid,
       }
     }