feat: update content page styling

opengovsg · Aug 2, 2024 · 3b11660 · 3b11660
1 parent 62788fc
commit 3b11660
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/...components/src/templates/next/components/internal/ContentPageHeader/ContentPageHeader.tsx b/...components/src/templates/next/components/internal/ContentPageHeader/ContentPageHeader.tsx
@@ -17,7 +17,7 @@ const ContentPageHeader = ({
       <div className="mx-auto flex max-w-screen-xl flex-col gap-8 px-6 py-8 md:px-10">
         <div className="flex flex-col">
           <Breadcrumb links={breadcrumb.links} LinkComponent={LinkComponent} />
-          <div className="mt-8 flex flex-col gap-5 md:mt-6">
+          <div className="mt-8 flex max-w-[54rem] flex-col gap-5 md:mt-6">
             <h1 className="prose-display-lg">{title}</h1>
             <p className="prose-title-lg-regular">{summary}</p>
           </div>

diff --git a/packages/components/src/templates/next/layouts/Content/Content.tsx b/packages/components/src/templates/next/layouts/Content/Content.tsx
@@ -133,9 +133,9 @@ const transformContent = (content: ContentPageSchemaType["content"]) => {
 const createContentLayoutStyles = tv({
   slots: {
     container:
-      "mx-auto grid max-w-screen-xl grid-cols-12 px-6 py-12 md:gap-6 md:px-10 md:py-16 lg:gap-10",
-    siderailContainer: "col-span-3 hidden md:block",
-    content: "col-span-12 flex flex-col gap-16 md:col-span-9 md:ml-24",
+      "mx-auto grid max-w-screen-xl grid-cols-12 px-6 py-12 md:px-10 md:py-16 lg:gap-6 xl:gap-10",
+    siderailContainer: "col-span-3 hidden lg:block",
+    content: "col-span-12 flex flex-col gap-16 lg:col-span-9 lg:ml-24",
   },
 })