From 987e35ef8f8bb1b42a0867b8666ea255910b1c86 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:28:44 -0600
Subject: [PATCH] feat: sticky headers for performance

---
 packages/website/src/components/Performance/Table.tsx |  9 +++++++--
 .../website/src/pages/tools/performance/_index.tsx    |  8 +++-----
 .../website/src/pages/tools/performance/index.astro   | 11 +++++++----
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/website/src/components/Performance/Table.tsx b/packages/website/src/components/Performance/Table.tsx
index 1abb0f8eb..5418e7b0b 100644
--- a/packages/website/src/components/Performance/Table.tsx
+++ b/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} />
diff --git a/packages/website/src/pages/tools/performance/_index.tsx b/packages/website/src/pages/tools/performance/_index.tsx
index 3ad6d03a1..77d42815f 100644
--- a/packages/website/src/pages/tools/performance/_index.tsx
+++ b/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">
-      <ModeSwitcher />
+    <PageWrapper color="jade" maxWidth="100%">
+      {/* <ModeSwitcher /> */}
 
-      <PerformanceInfo skeleton={skeleton} />
+      {/* <PerformanceInfo skeleton={skeleton} /> */}
       <FilterControl />
       <PlayerCountControl />
 
diff --git a/packages/website/src/pages/tools/performance/index.astro b/packages/website/src/pages/tools/performance/index.astro
index 38aa96d07..409f16240 100644
--- a/packages/website/src/pages/tools/performance/index.astro
+++ b/packages/website/src/pages/tools/performance/index.astro
@@ -1,11 +1,14 @@
 ---
-import { performanceTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import ToolOpenGraph from '../../../components/ToolOpenGraph.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>