From 515c7cac25faedac5210e08b10de88ba0b207aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Sun, 28 Sep 2025 20:45:08 +0800
Subject: [PATCH] =?UTF-8?q?uasge=E9=A1=B5=E9=9D=A2H5=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/usage/page.tsx              |  2 +-
 components/pages/usage-view.tsx | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/usage/page.tsx b/app/usage/page.tsx
index ef59718..c01fcf7 100644
--- a/app/usage/page.tsx
+++ b/app/usage/page.tsx
@@ -5,7 +5,7 @@ import UsageView from "@/components/pages/usage-view";
 
 const UsagePage: React.FC = () => {
     return (
-        <div data-alt="usage-page" className="h-screen overflow-auto px-4 py-6">
+        <div data-alt="usage-page" className="mobile-viewport-height min-h-screen mobile-safe-bottom overflow-hidden px-4 py-6 pb-[max(1rem,env(safe-area-inset-bottom))]">
             <UsageView />
         </div>
     );
diff --git a/components/pages/usage-view.tsx b/components/pages/usage-view.tsx
index 6f3a2bd..bb629e4 100644
--- a/components/pages/usage-view.tsx
+++ b/components/pages/usage-view.tsx
@@ -191,8 +191,9 @@ const UsageView: React.FC = () => {
     }, []);
 
     return (
-        <div data-alt="usage-view-container" className="mx-auto max-w-5xl p-4 sm:p-6">
-            <div data-alt="header" className="mb-6 flex items-center justify-between">
+        <div data-alt="usage-view-container" className="mx-auto max-w-5xl h-full flex flex-col p-4 sm:p-6 pb-[max(5rem,env(safe-area-inset-bottom))]">
+            <div data-alt="top-meta" className="sticky top-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 pt-2 pb-3 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
+              <div data-alt="header" className="mb-3 flex items-center justify-between">
                 <h2 className="text-base sm:text-xl font-semibold text-white">Credit Usage Details</h2>
                 <div data-alt="period-switch" className="inline-flex rounded-lg bg-white/5 p-1">
                     {([7, 30, 90] as PeriodDays[]).map((d) => (
@@ -212,13 +213,13 @@ const UsageView: React.FC = () => {
                         </button>
                     ))}
                 </div>
+              </div>
+              <div data-alt="meta" className="text-xs sm:text-sm text-white/70">
+                  <span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
+              </div>
             </div>
 
-            <div data-alt="meta" className="mb-3 text-xs sm:text-sm text-white/70">
-                <span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
-            </div>
-
-            <div data-alt="table-wrapper" className="overflow-hidden overflow-x-auto rounded-lg border border-white/10">
+            <div data-alt="table-wrapper" className="flex-1 min-h-0 overflow-auto rounded-lg border border-white/10">
                 <table data-alt="table" className="min-w-[32rem] sm:min-w-full table-auto">
                     <thead className="bg-white/5">
                         <tr>
@@ -332,7 +333,7 @@ const UsageView: React.FC = () => {
                 </table>
             </div>
 
-            <div data-alt="pagination" className="mt-4 flex items-center justify-between text-xs sm:text-sm text-white/80">
+            <div data-alt="pagination" className="sticky bottom-[max(1rem,env(safe-area-inset-bottom))] z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 mt-4 mb-[max(4rem,env(safe-area-inset-bottom))] flex items-center justify-between text-xs sm:text-sm text-white/80 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
                 <div data-alt="total-info">
                     Total {Number.isFinite(total) ? total : 0}
                 </div>