fix(style): responsive header and admin sidebar

src/App.vue

@@ -164,6 +164,33 @@ async function handleLogout() {
   background: var(--ac-header-active-bg);
 }
 
+@media (max-width: 640px) {
+  .app-header {
+    padding: 0 12px;
+    gap: 10px;
+  }
+
+  .header-page-title {
+    display: none;
+  }
+
+  .nav-links {
+    gap: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .nav-links::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-links a {
+    padding: 0 10px;
+    white-space: nowrap;
+  }
+}
+
 .app-main {
   margin: 24px auto;
   padding: 0 16px;

src/views/admin/AdminLayout.vue

@@ -65,4 +65,36 @@ const auth = useAuthStore()
   min-width: 0;
   padding: 20px;
 }
+
+@media (max-width: 640px) {
+  .admin-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    padding: 8px 12px;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    gap: 4px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .sidebar-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sidebar-nav a {
+    white-space: nowrap;
+    padding: 8px 12px;
+  }
+
+  .content {
+    padding: 12px;
+  }
+}
 </style>