From 8887cf5a27142bbfeca41be2ffe442fbea0bbc41 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:53:30 +0800
Subject: [PATCH] fix(workbench): stretch profile tag card

---
 .../business/ExpenseProfileTagPager.vue          | 11 ++++++-----
 web/tests/expense-profile-tag-pager.test.mjs     | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 web/tests/expense-profile-tag-pager.test.mjs

diff --git a/web/src/components/business/ExpenseProfileTagPager.vue b/web/src/components/business/ExpenseProfileTagPager.vue
index c17f864..2e56ce5 100644
--- a/web/src/components/business/ExpenseProfileTagPager.vue
+++ b/web/src/components/business/ExpenseProfileTagPager.vue
@@ -136,18 +136,19 @@ watch([() => props.visible, tagIdentity], ([visible]) => {
 
 <style scoped>
 .profile-tag-pager {
+  height: 100%;
   min-height: 308px;
   display: grid;
-  grid-template-rows: 272px 26px;
+  grid-template-rows: minmax(0, 1fr) 26px;
   gap: 10px;
 }
 
 .profile-tag-list {
   display: grid;
-  grid-template-rows: repeat(5, 48px);
-  align-content: start;
+  grid-template-rows: repeat(5, minmax(48px, 1fr));
+  align-content: stretch;
   gap: 8px;
-  min-height: 272px;
+  min-height: 0;
   animation: profileTagPageIn 180ms cubic-bezier(0.2, 0, 0, 1) both;
 }
 
@@ -159,7 +160,7 @@ watch([() => props.visible, tagIdentity], ([visible]) => {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
-  min-height: 48px;
+  min-height: 0;
   padding: 7px 10px;
   border: 1px solid rgba(var(--tag-accent-rgb), 0.2);
   border-left: 3px solid rgb(var(--tag-accent-rgb));
diff --git a/web/tests/expense-profile-tag-pager.test.mjs b/web/tests/expense-profile-tag-pager.test.mjs
new file mode 100644
index 0000000..e6cff4e
--- /dev/null
+++ b/web/tests/expense-profile-tag-pager.test.mjs
@@ -0,0 +1,16 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+import { fileURLToPath } from 'node:url'
+
+const pager = readFileSync(
+  fileURLToPath(new URL('../src/components/business/ExpenseProfileTagPager.vue', import.meta.url)),
+  'utf8'
+)
+
+test('profile tag pager stretches tag rows to the bottom of the card', () => {
+  assert.match(pager, /\.profile-tag-pager\s*\{[\s\S]*height:\s*100%;/)
+  assert.match(pager, /\.profile-tag-pager\s*\{[\s\S]*grid-template-rows:\s*minmax\(0,\s*1fr\) 26px;/)
+  assert.match(pager, /\.profile-tag-list\s*\{[\s\S]*grid-template-rows:\s*repeat\(5,\s*minmax\(48px,\s*1fr\)\);/)
+  assert.match(pager, /\.profile-tag-list\s*\{[\s\S]*align-content:\s*stretch;/)
+})