feat: sticky compare

src/components/Navbar/index.tsx

@@ -46,6 +46,7 @@ export default function Navbar() {
   return (
     <Box
       className={styles.navbar[showHamburgerMenu ? 'expanded' : 'collapsed']}
+      style={{ zIndex: 3 }}
     >
       <Flex direction="column" align="center" pt="2">
         <Flex

src/components/StickyColumnHeaderCell.tsx

@@ -1,15 +1,20 @@
 import { Table } from '@radix-ui/themes';
 import { ColumnHeaderCellProps } from '@radix-ui/themes/dist/cjs/components/table';
 
+interface StickyColumnHeaderCellProps extends ColumnHeaderCellProps {
+  top?: number | string;
+}
+
 export function StickyColumnHeaderCell({
   style,
+  top = 0,
   ...props
-}: ColumnHeaderCellProps) {
+}: StickyColumnHeaderCellProps) {
   return (
     <Table.ColumnHeaderCell
       style={{
         position: 'sticky',
-        top: 0,
+        top,
         background: 'var(--gray-3)',
         zIndex: 1,
         ...style,

src/components/StickyRowHeaderCell.tsx

@@ -5,6 +5,7 @@ export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
   return (
     <Table.RowHeaderCell
       style={{
+        display: 'flex',
         position: 'sticky',
         left: 0,
         backgroundColor: 'var(--color-panel)',

src/components/TankRowHeaderCell.tsx

@@ -15,7 +15,7 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   return (
     <StickyRowHeaderCell
       maxWidth={{ initial: '144px', sm: '240px' }}
-      style={{ overflow: 'hidden', display: 'flex' }}
+      style={{ overflow: 'hidden' }}
     >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img