Merge branch 'main' into feat/i18n/ja-JP/filters-sort

Author: serhalp

app/components/AppFooter.vue

@@ -13,7 +13,7 @@ const isHome = computed(() => route.name === 'index')
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <div class="flex items-center gap-3 sm:gap-6">
+        <div class="flex flex-wrap items-center gap-x-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"

app/components/AppHeader.vue

@@ -32,7 +32,7 @@ onKeyStroke(
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container h-14 flex items-center justify-start"
+      class="container min-h-14 flex items-center justify-start"
     >
       <!-- Start: Logo -->
       <div :class="{ 'hidden sm:block': showFullSearch }" class="flex-shrink-0">
@@ -85,18 +85,18 @@ onKeyStroke(
       <!-- End: User status + GitHub -->
       <div
         :class="{ 'hidden sm:flex': showFullSearch }"
-        class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0"
+        class="flex-1 flex flex-wrap items-center justify-end sm:gap-3 ms-auto sm:ms-0"
       >
         <NuxtLink
           to="/about"
-          class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="px-2 py-1.5 sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
         >
           {{ $t('footer.about') }}
         </NuxtLink>
 
         <NuxtLink
           to="/settings"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-2 px-2 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}

app/components/SearchBox.vue

@@ -105,7 +105,7 @@ function handleSearchFocus() {
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
-            class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />