chore: updated react-virtual package

Author: marcelpanse

frontend/package.json

@@ -31,7 +31,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-virtual": "^3.13.13",
     "@tensorflow/tfjs": "^4.22.0",
     "@types/recharts": "^2.0.1",
     "class-variance-authority": "^0.7.1",

frontend/src/components/CardsTable.tsx

@@ -1,6 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual'
 import i18n from 'i18next'
-import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getExpansionById } from '@/lib/CardsDB.ts'
 import { chunk, cn } from '@/lib/utils.ts'
@@ -75,10 +75,14 @@ export function CardsTable({ className, children, cards, groupExpansions, render
     [cards, cardsPerRow],
   )
 
+  const getItemKey = useCallback((index: number) => {
+    return rows[index].id // critical: stable keys per logical row
+  }, [])
+
   const rowVirtualizer = useVirtualizer({
     getScrollElement: () => scrollRef.current,
     count: rows.length,
-    getItemKey: (index) => rows[index].id, // critical: stable keys per logical row
+    getItemKey,
     estimateSize: (index) => (rows[index].type === 'header' ? 52 : cardHeight + 8),
     overscan: 5,
   })
@@ -102,7 +106,7 @@ export function CardsTable({ className, children, cards, groupExpansions, render
                     <img
                       src={`/images/sets/${i18n.language}/${row.expansion.id}.webp`}
                       alt={row.expansion.name}
-                      className="max-w-[60px]"
+                      className="max-w-15"
                       onError={(e) => {
                         ;(e.target as HTMLImageElement).src = `/images/sets/en-US/${row.expansion.id}.webp`
                       }}

frontend/src/pages/trade/TradeMatches.tsx

@@ -1,6 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { ChevronRight } from 'lucide-react'
-import { useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router'
 import { CardLine } from '@/components/CardLine'
@@ -22,10 +22,14 @@ function TradeMatches() {
 
   const { data: tradingPartners, isLoading, isError } = useTradingPartners(showResults, selectedCard)
 
+  const getItemKey = useCallback((index: number) => {
+    return cards[index].card_id
+  }, [])
+
   const virtualizer = useVirtualizer({
     getScrollElement: () => scrollRef.current,
     count: cards.length,
-    getItemKey: (index) => cards[index].card_id,
+    getItemKey,
     estimateSize: () => 32,
   })