✨ Update layout and styling for various components to enhance responsiveness and visual consistency

Author: HassanZahirnia

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

@@ -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">
+            <article class="flex w-full min-w-0 grow flex-col px-5">
                 {{ $slot }}
             </article>
 

resources/views/components/sidebar-right.blade.php

@@ -1,5 +1,5 @@
 <aside
-    class="sticky top-20 hidden max-h-[calc(100dvh-8rem)] w-64 shrink-0 overflow-y-auto overflow-x-hidden py-4 pl-10 pr-2 xl:block"
+    class="sticky top-20 hidden max-h-[calc(100dvh-8rem)] w-[17rem] shrink-0 overflow-y-auto overflow-x-hidden px-3 py-4 xl:block"
 >
     {{ $slot }}
 </aside>

resources/views/components/sponsors/lists/docs/corporate-sponsors.blade.php

@@ -1,6 +1,6 @@
 <a
     href="https://www.redgalaxy.co.uk/"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about RedGalaxy"
     aria-label="Visit RedGalaxy website"
     rel="noopener"
@@ -14,7 +14,7 @@ class="h-auto max-h-8 max-w-full"
 
 <a
     href="https://sevalla.com/?utm_source=nativephp&utm_medium=Referral&utm_campaign=homepage"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about Sevalla"
     aria-label="Visit Sevalla website"
     rel="noopener"
@@ -29,7 +29,7 @@ class="h-auto max-h-8 max-w-full text-black dark:text-white"
 {{--
     <a
     href="https://serverauth.com/"
-    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
+    class="dark:bg-mirage dark:hover:ring-cloud dark:hover:bg-haiti inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60"
     title="ServerAuth sponsor"
     aria-label="Visit ServerAuth website, sponsor"
     >
@@ -42,7 +42,7 @@ class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
 
 <a
     href="https://www.kaashosting.nl/?lang=en"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about KaasHosting"
     aria-label="Visit KaasHosting website"
     rel="noopener"
@@ -56,7 +56,7 @@ class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
 
 <a
     href="https://borah.digital/"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     title="Learn more about Borah Digital Labs"
     aria-label="Visit Borah Digital Labs website"
     rel="noopener"

resources/views/components/sponsors/lists/docs/featured-sponsors.blade.php

@@ -2,7 +2,7 @@
     href="https://beyondco.de/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp"
     title="Learn more about BeyondCode"
     aria-label="Visit BeyondCode website"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     rel="noopener sponsored"
 >
     <img
@@ -24,7 +24,7 @@ class="hidden h-auto max-h-8 max-w-full dark:block"
     href="https://laradevs.com/?ref=nativephp"
     title="Learn more about Laradevs"
     aria-label="Visit Laradevs website"
-    class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="inline-grid h-16 w-full shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     rel="noopener sponsored"
 >
     <x-sponsors.logos.laradevs

resources/views/components/toc-and-sponsors.blade.php

@@ -30,15 +30,15 @@ class="mt-2 flex flex-col space-y-2 border-l text-xs dark:border-l-white/15"
 {{-- Sponsor us --}}
 <a
     href="https://github.com/nativephp/laravel?sponsor=1"
-    class="mt-10 grid w-40 place-items-center gap-2 rounded-xl bg-pink-100 px-5 pb-3 pt-3.5 text-center transition duration-300 ease-in-out hover:bg-pink-200/80 dark:bg-pink-600/10 dark:hover:bg-pink-600/15"
+    class="mt-10 flex w-full items-center justify-center gap-3 rounded-xl bg-pink-100 p-5 text-center transition duration-300 ease-in-out hover:bg-pink-200/80 dark:bg-pink-600/10 dark:hover:bg-pink-600/15"
 >
-    <x-icons.love-baloons class="w-9" />
+    <x-icons.love-baloons class="w-8" />
     <div class="text-sm font-medium dark:font-normal">Sponsor us on GitHub</div>
 </a>
 
 {{-- Featured sponsors --}}
 <h3
-    class="mt-7 inline-flex items-center gap-1.5 border-t border-t-black/20 pt-5 text-sm opacity-60 dark:border-t-white/15"
+    class="mt-7 flex items-center gap-1.5 border-t border-t-black/20 pt-5 text-sm opacity-60 dark:border-t-white/15"
 >
     {{-- Icon --}}
     <x-icons.star-circle class="size-[18px]" />
@@ -52,7 +52,7 @@ class="mt-7 inline-flex items-center gap-1.5 border-t border-t-black/20 pt-5 tex
 
 {{-- Corporate sponsors --}}
 <h3
-    class="mt-7 inline-flex items-center gap-1.5 border-t border-t-black/20 pt-5 text-sm opacity-60 dark:border-t-white/15"
+    class="mt-7 flex items-center gap-1.5 border-t border-t-black/20 pt-5 text-sm opacity-60 dark:border-t-white/15"
 >
     {{-- Icon --}}
     <x-icons.briefcase class="size-[18px]" />