From 22c3ca69a0549645c61cd927f0145c7b04e70ddb Mon Sep 17 00:00:00 2001
From: yun-zhi-ztl <15071461069@163.com>
Date: Tue, 17 Mar 2026 11:36:48 +0800
Subject: [PATCH] fix: stack dashboard skills and tokens

---
 web/src/features/token/token-list.tsx           | 17 +++++++++--------
 .../features/token/token-table-style.test.ts    | 14 ++++++++++++++
 web/src/features/token/token-table-style.ts     |  2 ++
 web/src/pages/dashboard.tsx                     |  2 +-
 4 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 web/src/features/token/token-table-style.test.ts
 create mode 100644 web/src/features/token/token-table-style.ts

diff --git a/web/src/features/token/token-list.tsx b/web/src/features/token/token-list.tsx
index f40b1a6b..b7e50aac 100644
--- a/web/src/features/token/token-list.tsx
+++ b/web/src/features/token/token-list.tsx
@@ -23,6 +23,7 @@ import { Select } from '@/shared/ui/select'
 import { Input } from '@/shared/ui/input'
 import type { ApiToken } from '@/api/types'
 import { resolveTokenExpiresAt, toLocalDateTimeInputValue, type TokenExpirationMode } from './token-expiration'
+import { TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME, TOKEN_TABLE_HEAD_CLASS_NAME } from './token-table-style'
 
 const PAGE_SIZE = 10
 type TokenPage = { items: ApiToken[]; total: number; page: number; size: number }
@@ -166,7 +167,7 @@ export function TokenList() {
             <Button>{t('token.createNew')}</Button>
           </CreateTokenDialog>
         </div>
-        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-6 text-sm text-destructive">
+        <div className="rounded-2xl border border-destructive/30 bg-destructive/5 px-5 py-6 text-sm text-destructive">
           {error instanceof Error ? error.message : t('apiError.unknown')}
         </div>
       </div>
@@ -189,16 +190,16 @@ export function TokenList() {
           <p className="text-sm mt-2">{t('token.emptyHint')}</p>
         </div>
       ) : (
-        <div className="border rounded-lg">
+        <div className="overflow-hidden rounded-2xl border border-border/60 bg-card/80 shadow-card">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>{t('token.name')}</TableHead>
-                <TableHead>{t('token.prefix')}</TableHead>
-                <TableHead>{t('token.createdAt')}</TableHead>
-                <TableHead>{t('token.lastUsed')}</TableHead>
-                <TableHead>{t('token.expiresAt')}</TableHead>
-                <TableHead className="text-center">{t('token.actions')}</TableHead>
+                <TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.name')}</TableHead>
+                <TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.prefix')}</TableHead>
+                <TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.createdAt')}</TableHead>
+                <TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.lastUsed')}</TableHead>
+                <TableHead className={TOKEN_TABLE_HEAD_CLASS_NAME}>{t('token.expiresAt')}</TableHead>
+                <TableHead className={TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME}>{t('token.actions')}</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
diff --git a/web/src/features/token/token-table-style.test.ts b/web/src/features/token/token-table-style.test.ts
new file mode 100644
index 00000000..1b8e76db
--- /dev/null
+++ b/web/src/features/token/token-table-style.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME, TOKEN_TABLE_HEAD_CLASS_NAME } from './token-table-style'
+
+describe('token table header styles', () => {
+  it('uses roomier spacing for standard header cells', () => {
+    expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('px-5')
+    expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('py-4')
+    expect(TOKEN_TABLE_HEAD_CLASS_NAME).toContain('uppercase')
+  })
+
+  it('keeps the actions header centered', () => {
+    expect(TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME).toContain('text-center')
+  })
+})
diff --git a/web/src/features/token/token-table-style.ts b/web/src/features/token/token-table-style.ts
new file mode 100644
index 00000000..1331a077
--- /dev/null
+++ b/web/src/features/token/token-table-style.ts
@@ -0,0 +1,2 @@
+export const TOKEN_TABLE_HEAD_CLASS_NAME = 'px-5 py-4 text-xs uppercase tracking-[0.14em] text-muted-foreground/90'
+export const TOKEN_TABLE_ACTIONS_HEAD_CLASS_NAME = `${TOKEN_TABLE_HEAD_CLASS_NAME} text-center`
diff --git a/web/src/pages/dashboard.tsx b/web/src/pages/dashboard.tsx
index dfadb1f7..082e378b 100644
--- a/web/src/pages/dashboard.tsx
+++ b/web/src/pages/dashboard.tsx
@@ -101,7 +101,7 @@ export function DashboardPage() {
         ) : null}
       </div>
 
-      <div className="grid grid-cols-1 gap-8 xl:grid-cols-2 xl:items-start">
+      <div className="space-y-8">
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <h2 className="text-xl font-semibold">{t('mySkills.title')}</h2>