Merged in fix/full-size-header (pull request #1237)

fix: header on startpage is now full width

Approved-by: Chuma Mcphoy (We Ahead)

components/Blocks/FullWidthCampaign/index.tsx

@@ -24,9 +24,8 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
           alt={background_image.meta.alt || background_image.meta.caption || ""}
           src={background_image.url}
           focalPoint={background_image.focalPoint}
-          width={1512}
-          height={880}
-          sizes="(min-width: 1512px) 1512px, 100vw"
+          sizes="100vw"
+          fill
         />
       ) : null}
       <div className={styles.content}>

components/ContentType/StartPage/index.tsx

@@ -1,4 +1,3 @@
-import { assertNullableType } from "graphql"
 import { Suspense } from "react"
 
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
@@ -6,7 +5,6 @@ import { getStartPage } from "@/lib/trpc/memoizedRequests"
 import Blocks from "@/components/Blocks"
 import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
 import Image from "@/components/Image"
-import PageContainer from "@/components/PageContainer"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
@@ -23,7 +21,7 @@ export default async function StartPage() {
   const { header, blocks } = content.startPage
 
   return (
-    <PageContainer>
+    <>
       <header className={styles.header}>
         <div className={styles.headerContent}>
           <Title color="white" textAlign="center">
@@ -41,34 +39,32 @@ export default async function StartPage() {
             }
             src={header.hero_image.url}
             focalPoint={header.hero_image.focalPoint}
-            width={1512}
-            height={560}
+            sizes="100vw"
+            fill
           />
         ) : null}
       </header>
       <main className={styles.main}>
-        {blocks
-          ? blocks.map((block) => {
-              if (block.typename === BlocksEnums.block.FullWidthCampaign) {
-                return (
-                  <FullWidthCampaign
-                    key={block.typename}
-                    content={block.full_width_campaign}
-                  />
-                )
-              }
+        {(blocks || []).map((block) => {
+          if (block.typename === BlocksEnums.block.FullWidthCampaign) {
+            return (
+              <FullWidthCampaign
+                key={block.typename}
+                content={block.full_width_campaign}
+              />
+            )
+          }
 
-              return (
-                <div key={block.typename} className={styles.section}>
-                  <Blocks blocks={[block]} />
-                </div>
-              )
-            })
-          : null}
+          return (
+            <div key={block.typename} className={styles.section}>
+              <Blocks blocks={[block]} />
+            </div>
+          )
+        })}
       </main>
       <Suspense fallback={null}>
         <TrackingSDK pageData={content.tracking} />
       </Suspense>
-    </PageContainer>
+    </>
   )
 }

components/PageContainer/index.tsx

@@ -1,7 +0,0 @@
-import styles from "./pageContainer.module.css"
-
-import type { PropsWithChildren } from "react"
-
-export default function PageContainer({ children }: PropsWithChildren) {
-  return <div className={styles.container}>{children}</div>
-}

components/PageContainer/pageContainer.module.css

@@ -1,6 +0,0 @@
-.container {
-  width: 100%;
-  max-width: var(--max-width);
-  margin-left: auto;
-  margin-right: auto;
-}