From 6e519a749663efab1928c311aee0dc466cf03b30 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 12 Jun 2026 23:48:41 +0800
Subject: [PATCH] fix(usage): compact toolbar controls and unify visual style

- Reduce all four filter controls to w-[100px] h-9
- Add ChevronDown icon to date picker trigger for consistency
- Suppress focus border highlight on select triggers after close
---
 src/components/usage/UsageDashboard.tsx       | 6 +++---
 src/components/usage/UsageDateRangePicker.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/usage/UsageDashboard.tsx b/src/components/usage/UsageDashboard.tsx
index 0740dc376..9d49fcc27 100644
--- a/src/components/usage/UsageDashboard.tsx
+++ b/src/components/usage/UsageDashboard.tsx
@@ -206,7 +206,7 @@ export function UsageDashboard() {
             onValueChange={(v) => changeProviderName(decodeOptionValue(v))}
           >
             <SelectTrigger
-              className="h-9 w-[120px] bg-background text-xs [&>span]:min-w-0 [&>span]:truncate"
+              className="h-9 w-[100px] bg-background text-xs focus:border-border-default [&>span]:min-w-0 [&>span]:truncate"
               title={providerName ?? t("usage.filterBySource")}
             >
               <SelectValue />
@@ -231,7 +231,7 @@ export function UsageDashboard() {
             onValueChange={(v) => setModel(decodeOptionValue(v))}
           >
             <SelectTrigger
-              className="h-9 w-[120px] bg-background text-xs [&>span]:min-w-0 [&>span]:truncate"
+              className="h-9 w-[100px] bg-background text-xs focus:border-border-default [&>span]:min-w-0 [&>span]:truncate"
               title={model ?? t("usage.filterByModel")}
             >
               <SelectValue />
@@ -257,7 +257,7 @@ export function UsageDashboard() {
               onValueChange={(v) => changeRefreshInterval(Number(v))}
             >
               <SelectTrigger
-                className="h-9 w-[150px] bg-background text-xs"
+                className="h-9 w-[100px] bg-background text-xs focus:border-border-default"
                 title={t("usage.refreshInterval")}
                 aria-label={t("usage.refreshInterval")}
               >
diff --git a/src/components/usage/UsageDateRangePicker.tsx b/src/components/usage/UsageDateRangePicker.tsx
index 0e6af9d71..8f094c53d 100644
--- a/src/components/usage/UsageDateRangePicker.tsx
+++ b/src/components/usage/UsageDateRangePicker.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -273,11 +273,12 @@ export function UsageDateRangePicker({
         <Button
           type="button"
           variant={selection.preset === "custom" ? "default" : "outline"}
-          className="w-[150px] justify-start gap-2"
+          className="h-9 w-[100px] justify-start gap-1.5 text-xs"
           title={triggerLabel}
         >
           <CalendarDays className="h-4 w-4 shrink-0" />
-          <span className="truncate">{triggerLabel}</span>
+          <span className="truncate flex-1">{triggerLabel}</span>
+          <ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent