refactor(navbar): consistent spacing in navbar buttons (#507)

src/layouts/base.layout.vue

@@ -84,9 +84,8 @@ const tools = computed<ToolCategory[]>(() => [
     </template>
 
     <template #content>
-      <div class="navigation">
+      <div flex items-center justify-center gap-2>
         <c-button
-          :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
           variant="text"
           aria-label="Toggle menu"
@@ -104,9 +103,11 @@ const tools = computed<ToolCategory[]>(() => [
           Home
         </n-tooltip>
 
-        <command-palette mx-2 />
+        <command-palette />
 
-        <NavbarButtons v-if="!styleStore.isSmallScreen" />
+        <div>
+          <NavbarButtons v-if="!styleStore.isSmallScreen" />
+        </div>
 
         <n-tooltip trigger="hover">
           <template #trigger>
@@ -206,21 +207,4 @@ const tools = computed<ToolCategory[]>(() => [
     }
   }
 }
-
-// ::v-deep(.n-menu-item-content-header) {
-//   overflow: visible !important;
-//   // overflow-x: hidden !important;
-// }
-
-.navigation {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-
-  .search-bar {
-    // width: 100%;
-    flex-grow: 1;
-  }
-}
 </style>