feat: sticky headers for performance

packages/website/src/components/Performance/Table.tsx

@@ -6,11 +6,16 @@ import { Tanks } from './Tanks';
 
 export function TankTable({ skeleton }: MaybeSkeletonComponentProps) {
   return (
-    <Flex justify="center">
+    <Flex justify="center" maxWidth="100%" flexGrow="1" position="relative">
       <StickyTableRoot
         size={{ initial: '1', sm: '2' }}
         variant="surface"
-        style={{ maxWidth: '100%' }}
+        style={{
+          position: 'absolute',
+          maxWidth: '100%',
+          maxHeight: '100%',
+          height: '100%',
+        }}
       >
         <Header />
         <Tanks skeleton={skeleton} />

packages/website/src/pages/tools/performance/_index.tsx

@@ -1,7 +1,5 @@
 import { PageWrapper } from '../../../components/PageWrapper';
 import { Charts } from '../../../components/Performance/Charts';
-import { ModeSwitcher } from '../../../components/Performance/ModeSwitcher';
-import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo';
 import { PlayerCountControl } from '../../../components/Performance/PlayerCountControl';
 import { TankTable } from '../../../components/Performance/Table';
 import { FilterControl } from '../../../components/TankSearch/components/FilterControl';
@@ -26,10 +24,10 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
   const mode = TankPerformanceEphemeral.use((state) => state.mode);
 
   return (
-    <PageWrapper color="jade" maxWidth="unset">
+    <PageWrapper color="jade" maxWidth="100%">
-      <ModeSwitcher />
+      {/* <ModeSwitcher /> */}
 
-      <PerformanceInfo skeleton={skeleton} />
+      {/* <PerformanceInfo skeleton={skeleton} /> */}
       <FilterControl />
       <PlayerCountControl />
 

packages/website/src/pages/tools/performance/index.astro

@@ -1,11 +1,14 @@
 ---
-import { performanceTool } from '../../../constants/tools';
+import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { compareTool } from '../../../constants/tools';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
 ---
 
-<ToolLayout tool={performanceTool}>
+<ToolOpenGraph tool={compareTool} />
+
+<BaseLayout noFooter>
   <Page client:only="react">
     <Page skeleton slot="fallback" />
   </Page>
-</ToolLayout>
+</BaseLayout>