✨ Update layout classes for improved responsiveness and consistency across components

Author: HassanZahirnia

resources/views/components/footer.blade.php

@@ -1,5 +1,5 @@
 <footer
-    class="2xl:max-w-8xl mx-auto max-w-5xl px-5 pb-5 pt-20 xl:max-w-7xl"
+    class="mx-auto max-w-5xl px-5 pb-5 pt-20 xl:max-w-7xl 2xl:max-w-[90rem]"
     aria-labelledby="footer-heading"
 >
     <h2

resources/views/components/layout-three-columns.blade.php

@@ -1,7 +1,7 @@
 <x-layout :hasMenu="! empty($sidebarLeft)">
     {{-- Main container --}}
     <main
-        class="2xl:max-w-8xl mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl"
+        class="mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl 2xl:max-w-[90rem]"
     >
         {{-- Left sidebar --}}
         @if (! empty($sidebarLeft))
@@ -12,7 +12,7 @@ class="2xl:max-w-8xl mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl"
 
         <div class="flex w-full min-w-0 grow px-2 pt-2">
             {{-- Content --}}
-            <article class="flex w-full min-w-0 grow flex-col px-5">
+            <article class="flex w-full min-w-0 grow flex-col lg:pl-5 xl:pr-5">
                 {{ $slot }}
             </article>
 

resources/views/components/navigation-bar.blade.php

@@ -6,7 +6,7 @@ class="sticky top-0 z-50 flex flex-col items-center justify-center px-3"
 >
     <div
         :class="scrolled ? 'ring-gray-200/80 dark:ring-gray-800/50 translate-y-3 bg-white/50 dark:bg-white/5' : 'ring-transparent dark:bg-transparent'"
-        class="2xl:max-w-8xl mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-md transition duration-200 ease-out xl:max-w-7xl"
+        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-md transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-[90rem]"
     >
         {{-- Left side --}}
         <div class="flex items-center gap-3">

resources/views/docs/index.blade.php

@@ -44,7 +44,7 @@ class="mt-2 flex flex-col space-y-2 border-l text-xs dark:border-l-white/15"
     </div>
 
     <div
-        class="prose mt-8 dark:prose-invert prose-headings:scroll-mt-20 prose-headings:text-gray-800 sm:prose-headings:scroll-mt-32 dark:prose-headings:text-gray-50"
+        class="prose mt-8 max-w-none dark:prose-invert prose-headings:scroll-mt-20 prose-headings:text-gray-800 sm:prose-headings:scroll-mt-32 dark:prose-headings:text-gray-50"
     >
         {!! $content !!}
     </div>