diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a0af34fa7a..181426784e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,19 +5,19 @@
   {{ partial "head.html" . }}
 </head>
 
-<body class="min-w-fit bg-background-light text-base dark:bg-background-dark dark:text-white">
+<body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
   {{ partial "header.html" . }}
-  <main class="grid grid-cols-main md:flex xl:grid-cols-main-xl">
+  <main class="flex">
     <div id="sidebar"
-      class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll flex flex-row-reverse bg-background-light dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen">
+      class="sticky top-16 flex h-screen shrink-0 grow flex-row-reverse overflow-y-scroll bg-background-light dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen lg:grow-0">
       {{ block "left" . }}
       {{ end }}
     </div>
-    <div class="p-6 pt-0 md:w-screen overflow-clip">
+    <div class="w-[840px] flex-initial overflow-clip p-6 pt-0 md:w-lvw">
       {{ block "main" . }}
       {{ end }}
     </div>
-    <div class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll lg:hidden">
+    <div class="sticky top-16 h-screen w-[300px] shrink grow overflow-y-scroll lg:hidden">
       {{ block "right" . }}
       {{ end }}
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1c9bcdc536..74cdd805b3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,10 +4,6 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
-      gridTemplateColumns: {
-        "main": 'minmax(300px, 1fr) 840px minmax(300px, 1fr)',
-        "main-xl": '300px 840px minmax(0, 1fr)',
-      },
       typography: (theme) => ({
         DEFAULT: {
           css: {
