fix: 英文/日文等语言下导航栏不自适应、出现错位

Author: Kosthi

src/App.vue

@@ -225,7 +225,7 @@ onUnmounted(() => {
         <img src="/RushDB.png" alt="RushDB Logo" class="nav-logo-img" />
         <span>&ensp;RushDB</span>
       </a>
-      <div style="display: flex; align-items: center; gap: 2rem">
+      <div class="nav-actions">
         <button class="nav-toggle" type="button" :aria-label="t('nav.openMenu')" @click="toggleNavMenu">
           <span class="nav-toggle-bars" aria-hidden="true"></span>
         </button>

src/styles/site.css

@@ -99,6 +99,13 @@
         align-items: center;
       }
 
+      .nav-actions {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+        min-width: 0;
+      }
+
       .nav-logo {
         display: flex;
         align-items: center;
@@ -129,9 +136,18 @@
         display: flex;
         gap: 2rem;
         list-style: none;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .nav-links li {
+        display: flex;
       }
 
       .nav-links a {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
         text-decoration: none;
         color: var(--text-secondary);
         font-weight: 500;
@@ -158,6 +174,16 @@
         width: 100%;
       }
 
+      @media (max-width: 1024px) {
+        .nav-actions {
+          gap: 1rem;
+        }
+
+        .nav-links {
+          gap: 1.25rem;
+        }
+      }
+
       .container {
         max-width: 1200px;
         margin: 0 auto;
@@ -1688,8 +1714,11 @@
       .language-trigger {
         display: inline-flex;
         align-items: center;
+        justify-content: space-between;
         gap: 8px;
         padding: 8px 12px;
+        min-width: 118px;
+        white-space: nowrap;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 8px;
@@ -2031,7 +2060,7 @@
         transform: translateY(0) rotate(-45deg);
       }
 
-      @media (max-width: 768px) {
+      @media (max-width: 980px) {
         .nav-toggle {
           display: inline-flex;
         }