feat: sticky headers

src/app/tools/player-stats/[id]/page.tsx

@@ -213,7 +213,7 @@ export default function Page({ params }: { params: { id: string } }) {
                             {strings.common.bkni_percentile[percentile]}
                           </Text>
                           <Text size="1">
-                            {min} - {BKNI_PERCENTILES[index + 1]?.min ?? 200}
+                            {min}% - {BKNI_PERCENTILES[index + 1]?.min ?? 100}%
                           </Text>
                         </Flex>
                       </Button>

src/app/tools/tank-performance/components/Header.tsx

@@ -6,6 +6,7 @@ import {
   CaretUpIcon,
 } from '@radix-ui/react-icons';
 import { Flex, IconButton, Table } from '@radix-ui/themes';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
 import * as TankPerformanceSort from '../../../../stores/tankPerformanceSort';
 import {
   tankPerformanceSortTypeNames,
@@ -19,17 +20,16 @@ export function Header() {
   return (
     <Table.Header>
       <Table.Row align="center">
-        <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
+        <StickyColumnHeaderCell>Tank</StickyColumnHeaderCell>
         {tankPerformanceSortTypeNamesArray.map((type) => {
           const isSelected = sort.type === type;
 
           return (
-            <Table.ColumnHeaderCell
+            <StickyColumnHeaderCell
               px="2"
               key={type}
               width="0"
               justify="center"
-              minWidth="0px"
             >
               <Flex align="center" gap="1">
                 {tankPerformanceSortTypeNames[type]}
@@ -56,7 +56,7 @@ export function Header() {
                   )}
                 </IconButton>
               </Flex>
-            </Table.ColumnHeaderCell>
+            </StickyColumnHeaderCell>
           );
         })}
       </Table.Row>

src/app/tools/tank-performance/components/Table.tsx

@@ -13,7 +13,7 @@ export function TankTable() {
       <StickyTableRoot
         size={{ initial: '1', sm: '2' }}
         variant="surface"
-        style={{ maxWidth: '100%' }}
+        style={{ maxWidth: '100%', maxHeight: 'calc(100vh - 256px)' }}
       >
         <Header />
         <Suspense fallback={<BodyLoader />}>

src/app/tools/tank-performance/components/Total.tsx

@@ -43,7 +43,12 @@ export const Total = memo<TotalProps>(
 
     return (
       <Table.Row>
-        <StickyRowHeaderCell>Total</StickyRowHeaderCell>
+        <StickyRowHeaderCell
+          // maxWidth={{ initial: '128px', sm: '240px' }}
+          style={{ overflow: 'hidden', display: 'flex' }}
+        >
+          Total
+        </StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
         <Table.Cell align="center">{formatCompact(ratio * players)}</Table.Cell>
         <Table.Cell align="center">{formatCompact(ratio * battles)}</Table.Cell>

src/app/tools/tank-performance/page.tsx

@@ -2,13 +2,12 @@ import PageWrapper from '../../../components/PageWrapper';
 import { FilterControl } from '../tankopedia/components/FilterControl';
 import { Info } from './components/Info';
 import { TankTable } from './components/Table';
-import { TierBreakdown } from './components/TierBreakdown';
 
 export default function Page() {
   return (
     <PageWrapper color="jade" noMaxWidth>
       <Info />
-      <TierBreakdown />
+      {/* <TierBreakdown /> */}
       <FilterControl />
       <TankTable />
     </PageWrapper>