From efa6a8cd9271ae70e59d99dc9c2ca9748a1f5bc1 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Sun, 4 Oct 2026 17:24:10 +0800
Subject: [PATCH] style: refine protocol tabs and adaptive usage table layout

- Simplify protocol selection with subtle accent backgrounds and clear focus states
- Remove conflicting workspace styles from protocol tabs
- Expand usage tables to fill available width while preserving horizontal scrolling
- Allow token metrics to wrap in narrow columns
---
 src/pages/HomeDashboard.css    | 15 ++++++++-------
 src/pages/UsageEventsView.css  |  6 ++++--
 src/styles/workspace-white.css |  8 ++++----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/pages/HomeDashboard.css b/src/pages/HomeDashboard.css
index 10bb3ca..e997747 100644
--- a/src/pages/HomeDashboard.css
+++ b/src/pages/HomeDashboard.css
@@ -164,10 +164,10 @@
 
 .home-protocol-tabs {
   display: flex;
-  gap: 4px;
-  padding: 4px;
+  gap: 8px;
+  padding: 0;
   border-radius: 9px;
-  background: var(--bg-secondary);
+  background: transparent;
 }
 .home-protocol-tabs button {
   display: inline-flex;
@@ -177,17 +177,18 @@
   flex: 1;
   min-width: 0;
   margin: 0;
-  padding: 6px 4px;
+  padding: 9px 6px;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 8px;
   background: transparent;
   color: var(--text-tertiary);
   font-size: 14px;
   font-weight: 500;
   line-height: 1.5;
 }
-.home-protocol-tabs button:hover { color: var(--text-primary); background: transparent; }
-.home-protocol-tabs button.active { color: var(--ui-accent); border-color: var(--border-color); background: var(--bg-card); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
+.home-protocol-tabs button:hover { color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 5%, var(--bg-card)); }
+.home-protocol-tabs button.active { color: var(--ui-accent); border-color: transparent; background: color-mix(in srgb, var(--ui-accent) 10%, var(--bg-card)); font-weight: 600; box-shadow: none; }
+.home-protocol-tabs button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
 .home-protocol-tabs img { width: 18px; height: 18px; flex: none; object-fit: contain; }
 :root[data-theme='dark'] #home-protocol-openai img { filter: invert(1); }
 
diff --git a/src/pages/UsageEventsView.css b/src/pages/UsageEventsView.css
index 5b037be..34d1aa3 100644
--- a/src/pages/UsageEventsView.css
+++ b/src/pages/UsageEventsView.css
@@ -91,7 +91,8 @@
 }
 
 .usage-request-log .usage-events-table {
-  min-width: 0;
+  /* Fill spare space proportionally while retaining saved widths on narrow screens. */
+  min-width: 100%;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
 }
@@ -202,8 +203,9 @@
 
 .usage-request-log .usage-event-metrics {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 9px;
+  gap: 3px 9px;
   margin-top: 3px;
   font-size: 10px;
   font-weight: 500;
diff --git a/src/styles/workspace-white.css b/src/styles/workspace-white.css
index 1250e54..9a234b2 100644
--- a/src/styles/workspace-white.css
+++ b/src/styles/workspace-white.css
@@ -34,7 +34,7 @@
 
 :root:not([data-theme='dark']) .workspace :is(
   .agent-model-section, .agent-auth-segmented, .routing-segmented,
-  .plugin-tabs, .home-protocol-tabs, .usage-analysis-metric,
+  .plugin-tabs, .usage-analysis-metric,
   .credential-quota, .usage-collector-state
 ) {
   background: #fff;
@@ -53,7 +53,7 @@
 
 :root:not([data-theme='dark']) .workspace :is(
   .secondary-button:not(.danger), .icon-button:not(.danger), .agent-auth-segmented-button,
-  .routing-segmented button, .plugin-tabs button, .home-protocol-tabs button,
+  .routing-segmented button, .plugin-tabs button,
   .usage-refresh-btn, .usage-price-row-actions button
 ) {
   background: #fff;
@@ -65,7 +65,7 @@
 :root:not([data-theme='dark']) .workspace :is(
   .agent-list-items button.active, .agent-auth-segmented-button.active,
   .routing-segmented button.active, .plugin-tabs button.active,
-  .home-protocol-tabs button.active, .usage-analysis-metric button[aria-pressed='true']
+  .usage-analysis-metric button[aria-pressed='true']
 ) {
   background: #fff;
   border: 1px solid var(--ui-accent);
@@ -75,7 +75,7 @@
 
 :root:not([data-theme='dark']) .workspace :is(
   .secondary-button:not(.danger), .icon-button:not(.danger), .agent-auth-segmented-button,
-  .routing-segmented button, .plugin-tabs button, .home-protocol-tabs button,
+  .routing-segmented button, .plugin-tabs button,
   .agent-list-items button, .usage-refresh-btn, .usage-price-row-actions button
 ):hover:not(:disabled) {
   background: #fff;