Improve social icon layout (esp. on mobile menu)

Author: simonhamp

resources/views/components/navbar/mobile-menu.blade.php

@@ -248,10 +248,12 @@ class="h-0.5 w-full rounded-full bg-current opacity-5"
             ></div>
 
             <nav
-                class="mt-4 flex flex-wrap items-center justify-center gap-2.5"
+                class="mt-4 mx-auto flex"
                 aria-label="Social media"
             >
-                <x-social-networks-all />
+                <div class="grid grid-cols-4 justify-items-center gap-4">
+                    <x-social-networks-all />
+                </div>
             </nav>
         </div>
     </div>

resources/views/components/social-networks-all.blade.php

@@ -24,12 +24,12 @@ class="size-[1.4rem] text-black transition duration-200 group-hover:text-violet-
 
 <div>
     <a
-        href="https://bsky.app/profile/nativephp.com"
-        title="Bluesky"
+        href="https://github.com/nativephp"
+        title="Source code of NativePHP"
         class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
-        <x-icons.bluesky
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
+        <x-icons.github
+            class="size-[1.1rem] transition duration-200 group-hover:text-violet-400 dark:text-white"
         />
     </a>
 </div>
@@ -60,12 +60,12 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
 
 <div>
     <a
-        href="https://github.com/nativephp"
-        title="Source code of NativePHP"
+        href="https://bsky.app/profile/nativephp.com"
+        title="Bluesky"
         class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
     >
-        <x-icons.github
-            class="size-[1.1rem] transition duration-200 group-hover:text-violet-400 dark:text-white"
+        <x-icons.bluesky
+            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
         />
     </a>
 </div>