Update Layout.vue

resources/js/Shared/Layout.vue

@@ -14,10 +14,8 @@ main {
     <div class="min-h-full">
       <div class="fixed top-0 z-10 w-full">
         <!-- main nav -->
-        <nav
-          class="max-w-8xl mx-auto flex h-10 items-center justify-between border-b bg-gray-50 px-3 dark:border-slate-300/10 dark:bg-slate-900 dark:text-slate-200 sm:px-6">
-          <div
-            class="dark:highlight-white/5 items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm dark:border-0 dark:bg-sky-400/20 sm:flex">
+        <nav class="max-w-8xl mx-auto flex h-10 items-center justify-between border-b bg-gray-50 dark:border-slate-300/10  dark:text-slate-200 dark:bg-slate-900 px-3 sm:px-6">
+          <div class="items-center rounded-lg border border-gray-200 bg-white dark:bg-sky-400/20 dark:highlight-white/5 dark:border-0 px-2 py-1 text-sm sm:flex">
             <inertia-link :href="layoutData.url.vaults" class="flex-shrink-0 dark:text-sky-400">
               {{ layoutData.user.name }}
             </inertia-link>
@@ -54,7 +52,7 @@ main {
             </svg>
             <input
               type="text"
-              class="dark:highlight-white/5 block w-64 rounded-md border border-gray-300 px-2 py-1 text-center hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 dark:border-0 dark:bg-slate-800 dark:hover:bg-slate-700 sm:text-sm"
+              class="block w-64 rounded-md border border-gray-300 dark:bg-slate-800 dark:highlight-white/5 dark:hover:bg-slate-700 dark:border-0 px-2 py-1 text-center hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="Search something"
               @focus="goToSearchPage" />
           </div>