diff --git a/src/app/tools/tank-performance/components/Table.tsx b/src/app/tools/tank-performance/components/Table.tsx new file mode 100644 index 000000000..30bde3187 --- /dev/null +++ b/src/app/tools/tank-performance/components/Table.tsx @@ -0,0 +1,21 @@ +'use client'; + +import { Flex } from '@radix-ui/themes'; +import { Suspense } from 'react'; +import { StickyTableRoot } from '../../../../components/StickyTableRoot'; +import { BodyLoader } from './BodyLoader'; +import { Header } from './Header'; +import { Tanks } from './Tanks'; + +export function TankTable() { + return ( + + +
+ }> + + + + + ); +} diff --git a/src/app/tools/tank-performance/page.tsx b/src/app/tools/tank-performance/page.tsx index 1a12405fe..859dfe7b8 100644 --- a/src/app/tools/tank-performance/page.tsx +++ b/src/app/tools/tank-performance/page.tsx @@ -1,27 +1,14 @@ -import { Flex, Table } from '@radix-ui/themes'; -import { Suspense } from 'react'; import PageWrapper from '../../../components/PageWrapper'; import { FilterControl } from '../tankopedia/components/FilterControl'; -import { BodyLoader } from './components/BodyLoader'; -import { Header } from './components/Header'; import { Info } from './components/Info'; -import { Tanks } from './components/Tanks'; +import { TankTable } from './components/Table'; export default function Page() { return ( - - - - -
- }> - - - - + ); } diff --git a/src/components/StickyTableRoot.tsx b/src/components/StickyTableRoot.tsx new file mode 100644 index 000000000..f7615fc2e --- /dev/null +++ b/src/components/StickyTableRoot.tsx @@ -0,0 +1,17 @@ +'use client'; + +import { Table } from '@radix-ui/themes'; +import { RootProps } from '@radix-ui/themes/dist/cjs/components/table'; +import { useEffect, useRef } from 'react'; + +export function StickyTableRoot(props: RootProps) { + const table = useRef(null); + + useEffect(() => { + table.current + ?.querySelector('table') + ?.style.setProperty('overflow', 'auto'); + }, []); + + return ; +} diff --git a/src/components/TankRowHeaderCell.tsx b/src/components/TankRowHeaderCell.tsx index 7b8fbe7e5..ecc0ea732 100644 --- a/src/components/TankRowHeaderCell.tsx +++ b/src/components/TankRowHeaderCell.tsx @@ -13,7 +13,14 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) { const Icon = classIcons[tank.class]; return ( - +