From 19f63bc6e168433a3c7ec4e19853896e1b9df137 Mon Sep 17 00:00:00 2001
From: zyycn <zyycn@users.noreply.github.com>
Date: Tue, 14 Jul 2026 23:15:19 +0800
Subject: [PATCH] fix(frontend): correct scrollbar and table overflow

Hide native scrollbars behind the custom modal scrollbar and truncate overflowing account cells with accessible hover titles.

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/components/base/BaseScrollbar.vue     | 14 +++++++++++++-
 .../views/dashboard/components/UsageRecordCard.vue |  3 ++-
 frontend/src/views/usage/constants.ts              |  2 +-
 frontend/src/views/usage/index.vue                 |  3 ++-
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/base/BaseScrollbar.vue b/frontend/src/components/base/BaseScrollbar.vue
index 0af75c9d0..b9981b6e3 100644
--- a/frontend/src/components/base/BaseScrollbar.vue
+++ b/frontend/src/components/base/BaseScrollbar.vue
@@ -67,7 +67,7 @@ const rootClasses = computed(() => [
   props.maxHeight || props.height ? undefined : 'h-full',
 ])
 const wrapClasses = computed(() => [
-  'min-h-0 overflow-auto max-h-[inherit] [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar]:bg-transparent',
+  'base-scrollbar-wrap min-h-0 max-h-[inherit] overflow-auto',
   props.maxHeight ? undefined : 'h-full',
 ])
 const verticalTrackClass = computed(() =>
@@ -436,3 +436,15 @@ defineExpose({
     </div>
   </div>
 </template>
+
+<style scoped>
+.base-scrollbar-wrap {
+  scrollbar-width: none;
+}
+
+.base-scrollbar-wrap::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+</style>
diff --git a/frontend/src/views/dashboard/components/UsageRecordCard.vue b/frontend/src/views/dashboard/components/UsageRecordCard.vue
index 7b1c07b62..dedcb56b4 100644
--- a/frontend/src/views/dashboard/components/UsageRecordCard.vue
+++ b/frontend/src/views/dashboard/components/UsageRecordCard.vue
@@ -42,7 +42,8 @@ const dashboardUsageRecordColumns = usageRecordColumns.filter((column) => column
         >
           <template #accountEmail="{ row }">
             <span
-              class="whitespace-nowrap font-mono text-[12px] leading-none font-[720] text-(--cp-text-primary)"
+              class="block max-w-full truncate font-mono text-[12px] leading-none font-[720] text-(--cp-text-primary)"
+              :title="usageAccountText(row)"
             >
               {{ usageAccountText(row) }}
             </span>
diff --git a/frontend/src/views/usage/constants.ts b/frontend/src/views/usage/constants.ts
index d8997bdb9..afbf2f007 100644
--- a/frontend/src/views/usage/constants.ts
+++ b/frontend/src/views/usage/constants.ts
@@ -3,7 +3,7 @@ export const usageRecordColumns = [
     key: 'accountEmail',
     label: '账号',
     width: '250px',
-    ellipsis: false,
+    ellipsis: true,
   },
   {
     key: 'model',
diff --git a/frontend/src/views/usage/index.vue b/frontend/src/views/usage/index.vue
index ec6283dbe..f0cd655d1 100644
--- a/frontend/src/views/usage/index.vue
+++ b/frontend/src/views/usage/index.vue
@@ -172,7 +172,8 @@ watch(timeRange, () => {
           >
             <template #accountEmail="{ row }">
               <span
-                class="whitespace-nowrap font-mono text-[12px] leading-none font-[720] text-(--cp-text-primary)"
+                class="block max-w-full truncate font-mono text-[12px] leading-none font-[720] text-(--cp-text-primary)"
+                :title="usageAccountText(row)"
               >
                 {{ usageAccountText(row) }}
               </span>