From 1a0e22b767d2000bdea42907ce83136a9d124dbb Mon Sep 17 00:00:00 2001
From: cita <juricek.chen@gmail.com>
Date: Fri, 20 Mar 2026 16:30:24 +0800
Subject: [PATCH] fix: match proxy log model badge width to content

---
 .../pages/ProxyLogs.server-driven.test.tsx    | 27 +++++++++++++++++++
 src/web/pages/ProxyLogs.tsx                   |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/web/pages/ProxyLogs.server-driven.test.tsx b/src/web/pages/ProxyLogs.server-driven.test.tsx
index d10aba8..7a92b04 100644
--- a/src/web/pages/ProxyLogs.server-driven.test.tsx
+++ b/src/web/pages/ProxyLogs.server-driven.test.tsx
@@ -193,6 +193,33 @@ describe('ProxyLogs server-driven page', () => {
     }
   });
 
+  it('keeps the model badge sized to the model name in desktop rows', async () => {
+    let root: ReturnType<typeof create> | null = null;
+
+    try {
+      await act(async () => {
+        root = create(
+          <MemoryRouter initialEntries={['/logs']}>
+            <ToastProvider>
+              <ProxyLogs />
+            </ToastProvider>
+          </MemoryRouter>,
+        );
+      });
+      await flushMicrotasks();
+
+      const modelBadge = root!.root.find((node) => (
+        node.type === 'span'
+        && collectText(node) === 'gpt-4o'
+        && node.props.style?.display === 'inline-flex'
+      ));
+
+      expect(modelBadge.props.style?.alignSelf).toBe('flex-start');
+    } finally {
+      root?.unmount();
+    }
+  });
+
   it('re-queries the server for status, client, and search changes instead of filtering locally', async () => {
     let root: ReturnType<typeof create> | null = null;
 
diff --git a/src/web/pages/ProxyLogs.tsx b/src/web/pages/ProxyLogs.tsx
index 2c80aac..ef2eb91 100644
--- a/src/web/pages/ProxyLogs.tsx
+++ b/src/web/pages/ProxyLogs.tsx
@@ -823,7 +823,7 @@ export default function ProxyLogs() {
                       </td>
                       <td>
                         <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                          <ModelBadge model={log.modelRequested} />
+                          <ModelBadge model={log.modelRequested} style={{ alignSelf: 'flex-start' }} />
                           {downstreamKeySummary ? (
                             <div style={{ fontSize: 11, lineHeight: 1.45, color: 'var(--color-text-muted)' }}>
                               {downstreamKeySummary}