✨ Refactor DocSearch button styles for improved responsiveness and adjust logo size in navigation bar

Author: HassanZahirnia

resources/css/docsearch.css

@@ -34,14 +34,11 @@
 }
 
 .DocSearch-Button-Placeholder {
-    @apply hidden pr-20 text-sm text-black/60 min-[520px]:block dark:text-white/60;
+    @apply hidden pl-1 pr-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {
-    display: flex;
-    min-width: auto;
-
-    @apply ml-1 mt-1 text-sm leading-none;
+    @apply ml-1 mt-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
 }
 
 .DocSearch-Button-Key {

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

@@ -15,7 +15,7 @@ class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-
                 href="/"
                 aria-label="NativePHP Homepage"
             >
-                <x-logo class="h-5 sm:h-6" />
+                <x-logo class="h-4 min-[400px]:h-5 sm:h-6" />
                 <span class="sr-only">NativePHP</span>
             </a>
 
@@ -84,7 +84,7 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
                     <button
                         type="button"
                         @click="showDocsNavigation = !showDocsNavigation"
-                        class="block p-2 focus:outline-none focus:ring-0 lg:hidden"
+                        class="-m-2 block p-2 focus:outline-none focus:ring-0 lg:hidden"
                         aria-expanded="false"
                         aria-controls="docs-navigation"
                         aria-label="Toggle documentation menu"