From 9e283ab10bb9a4ad4c660d0e752070c393f8f367 Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Tue, 26 May 2026 12:16:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20fix(logs):=20remove=20hardcoded?=
 =?UTF-8?q?=20font-mono=20to=20support=20global=20theme=20font=20inheritan?=
 =?UTF-8?q?ce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove explicit 'font-mono' and custom size classes from model and token
  badges in usage logs.
- Allow model name and token badges to naturally inherit the active theme's
  font family (Sans or Serif) and text size from the parent container.
- Restore visual consistency and proportion across all table badge components.
---
 .../components/columns/common-logs-columns.tsx       | 12 ++++++------
 .../features/usage-logs/components/model-badge.tsx   |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
index 87a29deb..223c561d 100644
--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -357,7 +357,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                     )}
                   </div>
                   {log.channel_name && (
-                    <span className='text-muted-foreground/70 truncate text-[11px]'>
+                    <span className='text-muted-foreground/70 truncate !text-xs [font-family:var(--font-body)]'>
                       {channelName}
                     </span>
                   )}
@@ -491,7 +491,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   copyText={sensitiveVisible ? tokenName : undefined}
                   size='sm'
                   showDot={false}
-                  className='border-border/60 bg-muted/30 text-foreground max-w-full overflow-hidden rounded-md border h-6 px-2 py-0.5 gap-1.5 font-mono'
+                  className='border-border/60 bg-muted/30 text-foreground max-w-full overflow-hidden rounded-md border h-6 px-2 py-0.5 gap-1.5'
                 />
               </TooltipTrigger>
               {sensitiveVisible && tokenName.length > 16 && (
@@ -502,7 +502,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
             </Tooltip>
           </TooltipProvider>
           {metaParts.length > 0 && (
-            <span className='text-muted-foreground/60 truncate text-[11px]'>
+            <span className='text-muted-foreground/60 truncate !text-xs [font-family:var(--font-body)]'>
               {metaParts.join(' · ')}
             </span>
           )}
@@ -598,13 +598,13 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   />
                 ))}
             </div>
-            <div className='flex items-center gap-1 text-[11px]'>
-              <span className='text-muted-foreground/60'>
+            <div className='flex items-center gap-1 !text-xs leading-none [font-family:var(--font-body)]'>
+              <span className='text-muted-foreground/60 !text-xs leading-none [font-family:var(--font-body)]'>
                 {log.is_stream ? t('Stream') : t('Non-stream')}
                 {tokensPerSecond != null && (
                   <>
                     {' · '}
-                    <span className='font-mono tabular-nums'>
+                    <span className='tabular-nums'>
                       {Math.round(tokensPerSecond)}
                     </span>
                     {' t/s'}
diff --git a/web/default/src/features/usage-logs/components/model-badge.tsx b/web/default/src/features/usage-logs/components/model-badge.tsx
index efeb25e2..7d07c791 100644
--- a/web/default/src/features/usage-logs/components/model-badge.tsx
+++ b/web/default/src/features/usage-logs/components/model-badge.tsx
@@ -101,7 +101,7 @@ function ModelBadgeContent(props: ModelBadgeProps) {
       showDot={!provider}
       autoColor={provider ? undefined : props.modelName}
       className={cn(
-        'border-border/60 bg-muted/30 h-auto min-h-6 px-2 py-0.5 gap-1.5 rounded-md border font-mono whitespace-normal break-all',
+        'border-border/60 bg-muted/30 h-auto min-h-6 px-2 py-0.5 gap-1.5 rounded-md border whitespace-normal break-all',
         provider && 'text-foreground',
         props.className
       )}