From 38dc953b8c73817eb4ffac14185191734bf0a898 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Sun, 3 Dec 2023 00:19:19 +0300
Subject: [PATCH] fix: Layout max width (#6174)

fix: layout sizing moved to the container
---
 layouts/New/layouts.module.css | 11 ++++++-----
 tailwind.config.ts             |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index a5f53319e0390..634c05112f51c 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -7,13 +7,15 @@
 }
 
 .articleLayout {
-  @apply m-[0_auto]
+  @apply mx-auto
     grid
+    w-full
+    max-w-8xl
     grid-rows-[1fr]
     overflow-hidden
     grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[200px_1fr_200px]
-    xl:grid-cols-[320px_1fr_320px]
+    sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
     xs:m-0
     xs:block
     xs:overflow-auto;
@@ -25,7 +27,6 @@
   > *:nth-child(2) {
     @apply flex
       w-full
-      max-w-5xl
       flex-col
       items-start
       gap-6
@@ -36,7 +37,7 @@
       p-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
-      xl:px-[4.5rem]
+      xl:px-18
       xs:bg-none
       xs:p-4
       xs:dark:bg-none;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d00db270b960f..78b881295cca6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -130,8 +130,9 @@ export default {
         xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
         lg: '0px 4px 6px -2px theme(colors.shadow / 3%), 0px 12px 16px -4px theme(colors.shadow / 8%)',
       },
-      spacing: { '4.5': '1.125rem' },
+      spacing: { '4.5': '1.125rem', '18': '4.5rem' },
       aria: { current: 'current="page"' },
+      maxWidth: { '8xl': '90rem' },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],