From 5adbec25c4a26180e3f705fa96199b60240c60ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 23 Mar 2026 22:20:29 -0500
Subject: [PATCH] fix: compact compare headers

---
 .../src/components/Compare/CompareRow.tsx      | 18 +++++++++---------
 .../components/Compare/CompareSectionTitle.tsx |  8 ++++----
 .../src/components/StickyRowHeaderCell.tsx     |  8 ++++++--
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/website/src/components/Compare/CompareRow.tsx b/packages/website/src/components/Compare/CompareRow.tsx
index 566a3741a..fdb317b10 100644
--- a/packages/website/src/components/Compare/CompareRow.tsx
+++ b/packages/website/src/components/Compare/CompareRow.tsx
@@ -14,7 +14,7 @@ import { StickyRowHeaderCell } from "../StickyRowHeaderCell";
 
 type CompareRowProps = {
   display?: (
-    member: Awaited<TankCharacteristics>
+    member: Awaited<TankCharacteristics>,
   ) => number | string | undefined;
   deltaType?: CompareCellDirection;
   decimals?: number;
@@ -46,7 +46,7 @@ export function CompareRow({
   const values = stats.map((stat) =>
     typeof props.value === "function"
       ? props.value(stat)!
-      : (stat[props.value] as number)
+      : (stat[props.value] as number),
   );
   const id = useRef(Math.random());
   const name =
@@ -56,10 +56,10 @@ export function CompareRow({
 
   return (
     <Table.Row>
-      <StickyRowHeaderCell>
+      <StickyRowHeaderCell left="-1.25rem">
         <Flex
           align="center"
-          style={{ whiteSpace: "nowrap" }}
+          maxWidth={{ initial: "6rem", sm: "unset" }}
           gap={indent ? { initial: "4", sm: "6" } : { initial: "1", sm: "2" }}
         >
           <IconButton
@@ -111,8 +111,8 @@ export function CompareRow({
         const resolvedDisplayValue = display
           ? display(stats[index])
           : decimals === undefined
-          ? value
-          : value?.toFixed(decimals);
+            ? value
+            : value?.toFixed(decimals);
 
         return (
           <CompareCell
@@ -145,8 +145,8 @@ export function CompareRow({
                           deltaNominalDisplay
                             ? deltaNominalDisplay(delta)
                             : decimals === undefined
-                            ? delta
-                            : delta.toFixed(decimals)
+                              ? delta
+                              : delta.toFixed(decimals)
                         }`}
                         )
                       </Text>
@@ -156,7 +156,7 @@ export function CompareRow({
                       <Text color="gray">
                         (
                         {`${deltaPercentage > 0 ? "+" : ""}${Math.round(
-                          deltaPercentage * 100
+                          deltaPercentage * 100,
                         )}%`}
                         )
                       </Text>
diff --git a/packages/website/src/components/Compare/CompareSectionTitle.tsx b/packages/website/src/components/Compare/CompareSectionTitle.tsx
index 545481905..0c0f6cc68 100644
--- a/packages/website/src/components/Compare/CompareSectionTitle.tsx
+++ b/packages/website/src/components/Compare/CompareSectionTitle.tsx
@@ -1,7 +1,7 @@
-import { Heading, Table } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { CompareEphemeral } from '../../stores/compareEphemeral';
-import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
+import { Heading, Table } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 
 export function CompareSectionTitle({ children }: { children: string }) {
   const memberCount = CompareEphemeral.use((state) => state.members.length);
diff --git a/packages/website/src/components/StickyRowHeaderCell.tsx b/packages/website/src/components/StickyRowHeaderCell.tsx
index e3aaa61bf..d7f6a300c 100644
--- a/packages/website/src/components/StickyRowHeaderCell.tsx
+++ b/packages/website/src/components/StickyRowHeaderCell.tsx
@@ -1,12 +1,16 @@
 import { Table } from "@radix-ui/themes";
 import type { RowHeaderCellProps } from "@radix-ui/themes/src/components/table.js";
 
-export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
+interface Props extends RowHeaderCellProps {
+  left?: string | number;
+}
+
+export function StickyRowHeaderCell({ style, left = 0, ...props }: Props) {
   return (
     <Table.RowHeaderCell
       style={{
         position: "sticky",
-        left: 0,
+        left,
         backgroundColor: "var(--color-panel)",
         ...style,
       }}