fix deck stats positioning

src/components/deck/CardPreviewPane.tsx

···
 	const { data } = useQuery(getCardByIdQueryOptions(cardId));
 
 	return (
-		<div className="sticky top-20 flex items-center justify-center">
+		<div className="flex items-center justify-center">
 			{cardId && (
 				<CardImage
 					card={{ id: cardId, name: data?.name ?? "" }}

src/components/deck/DeckStats.tsx

···
-import { useQueries } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import {
-	computeManaCurve,
-	computeManaSymbolsVsSources,
-	computeSpeedDistribution,
-	computeSubtypeDistribution,
-	computeTypeDistribution,
-} from "@/lib/deck-stats";
-import type { DeckCard } from "@/lib/deck-types";
-import { combineCardQueries, getCardByIdQueryOptions } from "@/lib/queries";
-import type { ScryfallId } from "@/lib/scryfall-types";
-import { getSelectedCards, type StatsSelection } from "@/lib/stats-selection";
+import type { StatsSelection } from "@/lib/stats-selection";
+import type { DeckStatsData } from "@/lib/useDeckStats";
 import { ManaBreakdown } from "./stats/ManaBreakdown";
 import { ManaCurveChart } from "./stats/ManaCurveChart";
 import { SpeedPieChart } from "./stats/SpeedPieChart";
-import { StatsCardList } from "./stats/StatsCardList";
 import { SubtypesPieChart } from "./stats/SubtypesPieChart";
 import { TypesPieChart } from "./stats/TypesPieChart";
 
 interface DeckStatsProps {
-	cards: DeckCard[];
-	onCardHover: (cardId: ScryfallId | null) => void;
-	onCardClick?: (card: DeckCard) => void;
+	stats: DeckStatsData;
+	selection: StatsSelection;
+	onSelect: (selection: StatsSelection) => void;
 }
 
-export function DeckStats({ cards, onCardHover, onCardClick }: DeckStatsProps) {
-	const cardMap = useQueries({
-		queries: cards.map((card) => getCardByIdQueryOptions(card.scryfallId)),
-		combine: combineCardQueries,
-	});
-
-	const [selection, setSelection] = useState<StatsSelection>(null);
+export function DeckStats({ stats, selection, onSelect }: DeckStatsProps) {
+	const {
+		manaCurve,
+		typeDistribution,
+		subtypeDistribution,
+		speedDistribution,
+		manaBreakdown,
+		isLoading,
+	} = stats;
 
-	// Compute all statistics
-	const manaCurve = useMemo(
-		() =>
-			cardMap
-				? computeManaCurve(cards, (dc) => cardMap.get(dc.scryfallId))
-				: [],
-		[cards, cardMap],
-	);
-
-	const typeDistribution = useMemo(
-		() =>
-			cardMap
-				? computeTypeDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
-				: [],
-		[cards, cardMap],
-	);
-
-	const subtypeDistribution = useMemo(
-		() =>
-			cardMap
-				? computeSubtypeDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
-				: [],
-		[cards, cardMap],
-	);
-
-	const speedDistribution = useMemo(
-		() =>
-			cardMap
-				? computeSpeedDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
-				: [],
-		[cards, cardMap],
-	);
-
-	const manaBreakdown = useMemo(
-		() =>
-			cardMap
-				? computeManaSymbolsVsSources(cards, (dc) => cardMap.get(dc.scryfallId))
-				: [],
-		[cards, cardMap],
-	);
-
-	// Derive selected cards from selection + stats
-	const { cards: selectedCards, title: selectedTitle } = useMemo(
-		() =>
-			getSelectedCards(selection, {
-				manaCurve,
-				typeDistribution,
-				subtypeDistribution,
-				speedDistribution,
-				manaBreakdown,
-			}),
-		[
-			selection,
-			manaCurve,
-			typeDistribution,
-			subtypeDistribution,
-			speedDistribution,
-			manaBreakdown,
-		],
-	);
-
-	if (!cardMap) {
+	if (isLoading) {
 		return (
 			<div className="mt-8 pt-8 border-t border-gray-200 dark:border-slate-700">
 				<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
···
 		);
 	}
 
-	if (cards.length === 0) {
+	const hasData =
+		manaCurve.length > 0 ||
+		typeDistribution.length > 0 ||
+		subtypeDistribution.length > 0 ||
+		speedDistribution.length > 0 ||
+		manaBreakdown.length > 0;
+
+	if (!hasData) {
 		return null;
 	}
 
···
 				Statistics
 			</h2>
 
-			<div className="flex gap-6">
-				{/* Charts area */}
-				<div className="flex-1 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-					<ManaCurveChart
-						data={manaCurve}
-						selection={selection}
-						onSelect={setSelection}
-					/>
-					<TypesPieChart
-						data={typeDistribution}
-						selection={selection}
-						onSelect={setSelection}
-					/>
-					<SpeedPieChart
-						data={speedDistribution}
-						selection={selection}
-						onSelect={setSelection}
-					/>
-					<SubtypesPieChart
-						data={subtypeDistribution}
-						selection={selection}
-						onSelect={setSelection}
-					/>
-					<ManaBreakdown
-						data={manaBreakdown}
-						selection={selection}
-						onSelect={setSelection}
-					/>
-				</div>
-
-				{/* Card list panel */}
-				{selectedCards.length > 0 && (
-					<div className="flex-shrink-0">
-						<StatsCardList
-							title={selectedTitle}
-							cards={selectedCards}
-							onCardHover={onCardHover}
-							onCardClick={onCardClick}
-						/>
-					</div>
-				)}
+			<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				<ManaCurveChart
+					data={manaCurve}
+					selection={selection}
+					onSelect={onSelect}
+				/>
+				<TypesPieChart
+					data={typeDistribution}
+					selection={selection}
+					onSelect={onSelect}
+				/>
+				<SpeedPieChart
+					data={speedDistribution}
+					selection={selection}
+					onSelect={onSelect}
+				/>
+				<SubtypesPieChart
+					data={subtypeDistribution}
+					selection={selection}
+					onSelect={onSelect}
+				/>
+				<ManaBreakdown
+					data={manaBreakdown}
+					selection={selection}
+					onSelect={onSelect}
+				/>
 			</div>
 		</div>
 	);

src/components/deck/stats/StatsCardList.tsx

···
 	});
 
 	return (
-		<div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 min-w-48 max-h-80 overflow-y-auto">
+		<div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 min-w-48">
 			<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
 				{title}
 			</h4>

src/lib/useDeckStats.ts

···
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import {
+	computeManaCurve,
+	computeManaSymbolsVsSources,
+	computeSpeedDistribution,
+	computeSubtypeDistribution,
+	computeTypeDistribution,
+	type ManaCurveData,
+	type ManaSymbolsData,
+	type SpeedData,
+	type TypeData,
+} from "@/lib/deck-stats";
+import type { DeckCard } from "@/lib/deck-types";
+import { combineCardQueries, getCardByIdQueryOptions } from "@/lib/queries";
+
+export interface DeckStatsData {
+	manaCurve: ManaCurveData[];
+	typeDistribution: TypeData[];
+	subtypeDistribution: TypeData[];
+	speedDistribution: SpeedData[];
+	manaBreakdown: ManaSymbolsData[];
+	isLoading: boolean;
+}
+
+export function useDeckStats(cards: DeckCard[]): DeckStatsData {
+	const cardMap = useQueries({
+		queries: cards.map((card) => getCardByIdQueryOptions(card.scryfallId)),
+		combine: combineCardQueries,
+	});
+
+	const manaCurve = useMemo(
+		() =>
+			cardMap
+				? computeManaCurve(cards, (dc) => cardMap.get(dc.scryfallId))
+				: [],
+		[cards, cardMap],
+	);
+
+	const typeDistribution = useMemo(
+		() =>
+			cardMap
+				? computeTypeDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
+				: [],
+		[cards, cardMap],
+	);
+
+	const subtypeDistribution = useMemo(
+		() =>
+			cardMap
+				? computeSubtypeDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
+				: [],
+		[cards, cardMap],
+	);
+
+	const speedDistribution = useMemo(
+		() =>
+			cardMap
+				? computeSpeedDistribution(cards, (dc) => cardMap.get(dc.scryfallId))
+				: [],
+		[cards, cardMap],
+	);
+
+	const manaBreakdown = useMemo(
+		() =>
+			cardMap
+				? computeManaSymbolsVsSources(cards, (dc) => cardMap.get(dc.scryfallId))
+				: [],
+		[cards, cardMap],
+	);
+
+	return {
+		manaCurve,
+		typeDistribution,
+		subtypeDistribution,
+		speedDistribution,
+		manaBreakdown,
+		isLoading: !cardMap,
+	};
+}

src/routes/profile/$did/deck/$rkey/index.tsx

···
 import { type DragEndEvent, useDndMonitor } from "@dnd-kit/core";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { CardDragOverlay } from "@/components/deck/CardDragOverlay";
 import { CardModal } from "@/components/deck/CardModal";
···
 import { DragDropProvider } from "@/components/deck/DragDropProvider";
 import type { DragData } from "@/components/deck/DraggableCard";
 import { GoldfishView } from "@/components/deck/GoldfishView";
+import { StatsCardList } from "@/components/deck/stats/StatsCardList";
 import { TrashDropZone } from "@/components/deck/TrashDropZone";
 import { ViewControls } from "@/components/deck/ViewControls";
 import { asRkey } from "@/lib/atproto-client";
···
 import { getCardByIdQueryOptions } from "@/lib/queries";
 import type { ScryfallId } from "@/lib/scryfall-types";
 import { getImageUri } from "@/lib/scryfall-utils";
+import { getSelectedCards, type StatsSelection } from "@/lib/stats-selection";
 import { useAuth } from "@/lib/useAuth";
+import { useDeckStats } from "@/lib/useDeckStats";
 import { usePersistedState } from "@/lib/usePersistedState";
 
 export const Route = createFileRoute("/profile/$did/deck/$rkey/")({
···
 	const [modalCard, setModalCard] = useState<DeckCard | null>(null);
 	const [draggedCardId, setDraggedCardId] = useState<ScryfallId | null>(null);
 	const [isDragging, setIsDragging] = useState(false);
+	const [statsSelection, setStatsSelection] = useState<StatsSelection>(null);
+
+	const statsCards = useMemo(
+		() => [
+			...getCardsInSection(deck, "commander"),
+			...getCardsInSection(deck, "mainboard"),
+		],
+		[deck],
+	);
+	const stats = useDeckStats(statsCards);
+	const selectedCards = useMemo(
+		() => getSelectedCards(statsSelection, stats),
+		[statsSelection, stats],
+	);
 
 	const mutation = useUpdateDeckMutation(did as Did, asRkey(rkey));
 	const queryClient = Route.useRouteContext().queryClient;
···
 				draggedCardId={draggedCardId}
 				isDragging={isDragging}
 				isOwner={isOwner}
+				stats={stats}
+				statsSelection={statsSelection}
+				selectedCards={selectedCards}
+				setStatsSelection={setStatsSelection}
 				setIsDragging={setIsDragging}
 				setDraggedCardId={setDraggedCardId}
 				handleCardHover={handleCardHover}
···
 	draggedCardId: ScryfallId | null;
 	isDragging: boolean;
 	isOwner: boolean;
+	stats: ReturnType<typeof useDeckStats>;
+	statsSelection: StatsSelection;
+	selectedCards: ReturnType<typeof getSelectedCards>;
+	setStatsSelection: (selection: StatsSelection) => void;
 	setIsDragging: (dragging: boolean) => void;
 	setDraggedCardId: (id: ScryfallId | null) => void;
 	handleCardHover: (cardId: ScryfallId | null) => void;
···
 	draggedCardId,
 	isDragging,
 	isOwner,
+	stats,
+	statsSelection,
+	selectedCards,
+	setStatsSelection,
 	setIsDragging,
 	setDraggedCardId,
 	handleCardHover,
···
 			{/* Main content */}
 			<div className="max-w-7xl 2xl:max-w-[96rem] mx-auto px-6 py-8">
 				<div className="flex flex-col md:flex-row gap-6">
-					{/* Left pane: Card preview (fixed width) */}
+					{/* Left pane: Card preview + stats card list (fixed width) */}
 					<div className="hidden md:block md:w-48 lg:w-60 xl:w-80 md:flex-shrink-0">
-						<CardPreviewPane cardId={previewCard} />
+						<div className="sticky top-20 max-h-[calc(100vh-6rem)] flex flex-col">
+							<CardPreviewPane cardId={previewCard} />
+							{selectedCards.cards.length > 0 && (
+								<div className="min-h-0 flex-1 overflow-y-auto mt-8">
+									<StatsCardList
+										title={selectedCards.title}
+										cards={selectedCards.cards}
+										onCardHover={handleCardHover}
+										onCardClick={handleCardClick}
+									/>
+								</div>
+							)}
+						</div>
 					</div>
 
 					{/* Right pane: Deck sections (fills remaining space) */}
···
 						/>
 
 						<DeckStats
-							cards={[
-								...getCardsInSection(deck, "commander"),
-								...getCardsInSection(deck, "mainboard"),
-							]}
-							onCardHover={handleCardHover}
-							onCardClick={handleCardClick}
+							stats={stats}
+							selection={statsSelection}
+							onSelect={setStatsSelection}
 						/>
 
 						<GoldfishView