fix(BaseNavigation): menu item buttons not centered

See: FE-109

Author: marcel-bitfly

frontend/.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "conventionalCommits.scopes": [
+        "BaseNavigation",
         "BaseNavigationLeft",
         "BcButton",
         "BcDataWrapper",
@@ -86,7 +87,7 @@
         "useStripeProvider",
         "useWindowSize",
         "variables.scss",
-        "vscode"
+        "vscode" 
     ],
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "always"

frontend/layers/base/app/components/BaseNavigation.vue

@@ -20,28 +20,30 @@ const v1Domain = useV1Domain()
 
 <template>
   <nav class="p-2xl">
-    <div class="max-w-8xl mx-auto grid grid-cols-[auto_1fr_auto] gap-2xl items-center">
-      <BaseButtonIcon
-        screenreader-text="base.common.open_navigation"
-        class="sm:hidden"
-        name="menu-2"
-        variant="secondary"
-        @click="handleClick"
-      />
-      <NuxtLink
-        to="/"
-        class="flex gap-sm p-md rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300 w-fit"
-      >
-        <BaseScreenreaderOnly screenreader-text="base.beaconchain_homepage" />
-        <TheLogoMark
-          width="1.25rem"
-          class="aspect-square"
+    <div class="max-w-8xl mx-auto grid gap-2xl [&>*]:[grid-area:1/1]">
+      <span class="flex gap-2xl items-center">
+        <BaseButtonIcon
+          screenreader-text="base.common.open_navigation"
+          class="sm:hidden"
+          name="menu-2"
+          variant="secondary"
+          @click="handleClick"
         />
-        <TheLogoType
-          class="hidden md:inline"
-          width="6.25rem"
-        />
-      </NuxtLink>
+        <NuxtLink
+          to="/"
+          class="flex gap-sm p-md rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300 w-fit"
+        >
+          <BaseScreenreaderOnly screenreader-text="base.beaconchain_homepage" />
+          <TheLogoMark
+            width="1.25rem"
+            class="aspect-square"
+          />
+          <TheLogoType
+            class="hidden md:inline"
+            width="6.25rem"
+          />
+        </NuxtLink>
+      </span>
       <ul class="hidden sm:flex gap-xl justify-center">
         <li
           v-for="{ icon, label, to } in items"
@@ -54,19 +56,21 @@ const v1Domain = useV1Domain()
           />
         </li>
       </ul>
-      <BaseButtonIcon
-        v-if="hasSession"
-        variant="secondary"
-        screenreader-text="base.action.open_user_menu"
-        name="user"
-        @click="navigateTo(`${v1Domain}/user/settings`, { external: true })"
-      />
-      <BaseButton
-        v-else
-        @click="navigateToV1Login"
-      >
-        {{ $t('base.common.log_in') }}
-      </BaseButton>
+      <span class="justify-self-end">
+        <BaseButtonIcon
+          v-if="hasSession"
+          variant="secondary"
+          screenreader-text="base.action.open_user_menu"
+          name="user"
+          @click="navigateTo(`${v1Domain}/user/settings`, { external: true })"
+        />
+        <BaseButton
+          v-else
+          @click="navigateToV1Login"
+        >
+          {{ $t('base.common.log_in') }}
+        </BaseButton>
+      </span>
     </div>
   </nav>
 </template>