From 32adc6b6941f58dbcf7aa4a8e4e7d5cdeb6bd0b5 Mon Sep 17 00:00:00 2001
From: orenzhang <41963680+OrenZhang@users.noreply.github.com>
Date: Fri, 17 Apr 2026 21:24:32 +0800
Subject: [PATCH] feat(leaderboard): improve layout responsiveness and enhance
 percentage calculation

---
 frontend/app/(main)/layout.tsx                   |  2 +-
 .../common/leaderboard/leaderboard-table.tsx     | 16 +++++++++++++---
 frontend/components/layout/header.tsx            |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/app/(main)/layout.tsx b/frontend/app/(main)/layout.tsx
index 958077bf..d8361612 100644
--- a/frontend/app/(main)/layout.tsx
+++ b/frontend/app/(main)/layout.tsx
@@ -34,7 +34,7 @@ export default function MainLayout({
           <SidebarInset className="flex flex-col min-w-0 h-screen">
             <SiteHeader isFullWidth={isFullWidth} onToggleFullWidth={setIsFullWidth} />
             <div className="flex flex-1 flex-col bg-background overflow-y-auto overflow-x-hidden min-w-0 hide-scrollbar">
-              <div className={`w-full mx-auto px-12 min-w-0 transition-all duration-300 ease-in-out ${!isFullWidth ? "max-w-[1320px]" : "max-w-full"}`}>
+              <div className={`w-full mx-auto px-4 sm:px-6 md:px-8 lg:px-12 min-w-0 transition-all duration-300 ease-in-out ${!isFullWidth ? "max-w-[1320px]" : "max-w-full"}`}>
                 <motion.div
                   key={pathname}
                   initial={{ opacity: 0 }}
diff --git a/frontend/components/common/leaderboard/leaderboard-table.tsx b/frontend/components/common/leaderboard/leaderboard-table.tsx
index aebd1563..17f6d2c0 100644
--- a/frontend/components/common/leaderboard/leaderboard-table.tsx
+++ b/frontend/components/common/leaderboard/leaderboard-table.tsx
@@ -38,16 +38,26 @@ export const LeaderboardTable = React.memo(function LeaderboardTable({
     return Math.max(...items.map(item => parseFloat(item.available_balance))) || 1
   }, [items])
 
+  const computePercentage = React.useCallback(
+    (balance: number) => {
+      const denominator = Math.log(maxBalance + 1)
+      if (denominator <= 0) return 0
+      const safeBalance = Math.max(balance, 0)
+      return (Math.log(safeBalance + 1) / denominator) * 100
+    },
+    [maxBalance]
+  )
+
   const rankedItems = React.useMemo(
     () =>
       items
         .map((entry, index) => ({
           entry,
           rank: startRank + index,
-          percentage: (parseFloat(entry.available_balance) / maxBalance) * 100,
+          percentage: computePercentage(parseFloat(entry.available_balance)),
         }))
         .filter(({ entry }) => entry.user_id !== currentUserEntry?.user_id),
-    [items, startRank, currentUserEntry?.user_id, maxBalance]
+    [items, startRank, currentUserEntry?.user_id, computePercentage]
   )
 
   const virtualizer = useVirtualizer({
@@ -69,7 +79,7 @@ export const LeaderboardTable = React.memo(function LeaderboardTable({
   }, [virtualItems, rankedItems.length, hasMore, loading, onLoadMore])
 
   const currentUserPercentage = currentUserEntry
-    ? (parseFloat(currentUserEntry.available_balance) / maxBalance) * 100
+    ? computePercentage(parseFloat(currentUserEntry.available_balance))
     : 0
 
   if (loading && items.length === 0) {
diff --git a/frontend/components/layout/header.tsx b/frontend/components/layout/header.tsx
index 4e04b50c..e8c532e3 100644
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -96,7 +96,7 @@ export function SiteHeader({ isFullWidth = false, onToggleFullWidth }: { isFullW
           </div>
         </div>
 
-        <div className={`hidden md:flex w-full items-center gap-4 transition-all duration-300 ease-in-out ${!isFullWidth ? "max-w-[1320px]" : "max-w-full"} mx-auto px-12`}>
+        <div className={`hidden md:flex w-full items-center gap-4 transition-all duration-300 ease-in-out ${!isFullWidth ? "max-w-[1320px]" : "max-w-full"} mx-auto md:px-8 lg:px-12`}>
           <div className="relative w-64 cursor-pointer" onClick={() => setSearchOpen(true)}>
             <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
             <div className="flex h-8 items-center rounded-md border border-border/60 bg-muted/70 pl-10 pr-2.5 text-sm text-muted-foreground transition-colors hover:border-border hover:bg-muted">