From 5250a20578d2039592db911319a91f6f4a9cb61d Mon Sep 17 00:00:00 2001
From: Jovines <1246634075@qq.com>
Date: Fri, 27 Feb 2026 02:22:41 +0800
Subject: [PATCH] fix(mobile): optimize usage rate limits tabs UI for mobile
 (#522)

Replace AnimatedTabs with lightweight text toggle in mobile usage view
to improve visual hierarchy between navigation tabs and filter options.
The new design uses text buttons with underline indicator instead of
card-style tabs, making the two tab levels more distinguishable.

Co-authored-by: Jovines <jovines@qq.com>
---
 packages/ui/src/components/layout/Header.tsx | 39 +++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index e5aabd37..03dd766a 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -1573,20 +1573,41 @@ export const Header: React.FC<HeaderProps> = ({
                     <div className="flex-1 overflow-y-auto overflow-x-hidden pb-[calc(4rem+env(safe-area-inset-bottom))]">
                       <div className="bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
                         <div className="flex items-center justify-between gap-3 px-3 py-2.5">
-                          <div className="flex min-w-0 items-center gap-2">
+                          <div className="flex flex-col min-w-0">
                             <span className="typography-ui-header font-semibold text-foreground">Rate limits</span>
                             <span className="truncate typography-ui-label text-muted-foreground">
                               Last updated {formatTime(quotaLastUpdated)}
                             </span>
                           </div>
-                          <div className="flex items-center gap-1.5">
-                            <AnimatedTabs<'usage' | 'remaining'>
-                              value={quotaDisplayMode}
-                              onValueChange={handleDisplayModeChange}
-                              tabs={quotaDisplayTabs}
-                              size="sm"
-                              className="w-[10.5rem]"
-                            />
+                          <div className="flex items-center gap-2 shrink-0">
+                            {/* Light-weight text toggle for Used/Remaining */}
+                            <div className="flex items-center h-6">
+                              <button
+                                type="button"
+                                onClick={() => handleDisplayModeChange('usage')}
+                                className={cn(
+                                  'typography-ui-label px-1 pb-0.5 transition-colors',
+                                  quotaDisplayMode === 'usage'
+                                    ? 'text-foreground border-b-2 border-[var(--primary-base)]'
+                                    : 'text-muted-foreground hover:text-foreground'
+                                )}
+                              >
+                                Used
+                              </button>
+                              <span className="text-muted-foreground typography-ui-label px-0.5">·</span>
+                              <button
+                                type="button"
+                                onClick={() => handleDisplayModeChange('remaining')}
+                                className={cn(
+                                  'typography-ui-label px-1 pb-0.5 transition-colors',
+                                  quotaDisplayMode === 'remaining'
+                                    ? 'text-foreground border-b-2 border-[var(--primary-base)]'
+                                    : 'text-muted-foreground hover:text-foreground'
+                                )}
+                              >
+                                Remaining
+                              </button>
+                            </div>
                             <button
                               type="button"
                               className={cn(