From 80ecf386762401e24cb1065957d3e75a10257162 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sun, 30 Aug 2026 17:57:24 +0800
Subject: [PATCH] fix: responsive Home header buttons for mobile and desktop

---
 frontend/src/views/Home.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index e9e1f7b..3c8504b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -6,12 +6,12 @@
           <img src="@/assets/logo.svg" alt="OpenTeam logo" width="36" height="36" class="h-9 w-9" />
           <span class="text-lg font-bold tracking-tight">OpenTeam</span>
         </a>
-        <div class="flex items-center gap-2">
-          <!-- 下拉打开时的透明遮罩：点击任意处关闭（触屏可靠） -->
+        <div class="flex items-center gap-1.5">
+          <!-- Theme switcher -->
           <div v-if="themeMenuOpen" class="fixed inset-0 z-40" aria-hidden="true" @click="themeMenuOpen = false"></div>
           <div class="dropdown dropdown-end" :class="{ 'dropdown-open': themeMenuOpen }">
             <label id="theme-menu-label" class="sr-only">切换主题</label>
-            <button class="btn btn-ghost btn-sm btn-square h-9 w-9 min-h-9 rounded-full"
+            <button class="btn btn-ghost btn-square size-8 rounded-full"
               aria-labelledby="theme-menu-label" :aria-expanded="themeMenuOpen" @click="themeMenuOpen = !themeMenuOpen">
               <SunIcon v-if="preference === 'light'" class="size-4" aria-hidden="true" />
               <MoonIcon v-else-if="preference === 'dark'" class="size-4" aria-hidden="true" />
@@ -38,17 +38,20 @@
               </li>
             </ul>
           </div>
+          <!-- GitHub -->
           <a href="https://github.com/mirrors2/opencatd-open" target="_blank" rel="noopener noreferrer"
-            class="btn btn-ghost btn-sm h-9 min-h-9 gap-2 rounded-full">
-            <Icon icon="simple-icons:github" class="size-4" aria-hidden="true" />
+            class="btn btn-ghost btn-sm size-8 justify-center gap-2 rounded-full px-0 sm:w-auto sm:px-2">
+            <Icon icon="simple-icons:github" class="size-4 shrink-0" aria-hidden="true" />
             <span class="hidden sm:inline">Star</span>
-            <span class="inline-flex items-center gap-1 rounded-full bg-base-200 px-2 py-0.5 text-xs font-medium tabular-nums">
+            <span class="hidden sm:inline-flex items-center gap-1 rounded-full bg-base-200 px-1 py-0.5 text-xs font-medium tabular-nums">
               <Icon icon="mingcute:star-fill" class="size-3.5 text-warning" aria-hidden="true" />
               {{ star }}
             </span>
           </a>
-          <RouterLink to="/dashboard" class="btn btn-primary btn-sm h-9 min-h-9 rounded-full px-3 sm:px-4 whitespace-nowrap">
-            Dashboard
+          <!-- Dashboard -->
+          <RouterLink to="/dashboard" class="btn btn-primary btn-sm size-8 justify-center gap-1.5 rounded-full px-0 sm:w-auto sm:px-3">
+            <LayoutDashboard class="size-4 shrink-0 sm:hidden" aria-hidden="true"/>
+            <span class="hidden sm:inline">Dashboard</span>
           </RouterLink>
         </div>
       </div>
@@ -130,7 +133,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { SunIcon, MoonIcon, MonitorIcon } from '@lucide/vue';
+import { SunIcon, MoonIcon, MonitorIcon, LayoutDashboard } from '@lucide/vue';
 import LineSegmentFlow from '@/components/common/LineSegmentFlow.vue';
 import { Icon } from '@iconify/vue';
 import { useToast } from '@/composables/toast';