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

@@ -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>

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>

frontend/src/views/usage/constants.ts

@@ -3,7 +3,7 @@ export const usageRecordColumns = [
     key: 'accountEmail',
     label: '账号',
     width: '250px',
-    ellipsis: false,
+    ellipsis: true,
   },
   {
     key: 'model',

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>