From 25c0b1faa03d46e4e8afaac3b5f3313c550acb8b Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Sun, 29 Mar 2026 20:34:04 +0200
Subject: [PATCH] Revert "fix?"

This reverts commit 42e3620603730307edf9e3899b05f47e74fb5599.
---
 src/pages/HomePage.jsx | 65 +++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 60ad4c1..b7262fe 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,3 +1,4 @@
+//HomePage.jsx
 import React, { useEffect, useState, useContext } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import CardRow from '../components/CardRow/CardRow';
@@ -34,8 +35,11 @@ function HomePage() {
       .finally(() => setLoading(false));
   }, []);
 
+  // Load image for the currently expanded card
+
   useEffect(() => {
     if (!expandedCardId || cardImages[expandedCardId]) return;
+
     fetchCardImage(expandedCardId)
       .then(image => setCardImage(expandedCardId, image))
       .catch(err => console.error('Failed to load card image', err));
@@ -46,6 +50,7 @@ function HomePage() {
 
   const expandedCard = cards.find(c => c.id === expandedCardId);
 
+  // Filter + sort using debounced search
   const filteredCards = cards
     .filter(card =>
       card.name.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
@@ -53,41 +58,37 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-      {/* Main content scrollable area */}
-      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Left panel: card list */}
-        <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', overflowY: 'auto' }}>
-          <h2>Card List</h2>
-          <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Left panel: card list */}
+      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem' }}>
+        <h2>Card List</h2>
+        <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
 
-          <Virtuoso
-            style={{ height: '100%' }}
-            data={filteredCards}
-            itemContent={(index, card) => <CardRow key={card.id} card={card} />}
-          />
-        </div>
-
-        {/* Right panel: card image */}
-        <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
-          <h2>Card Image / Details</h2>
-          {expandedCardId && expandedCard ? (
-            cardImages[expandedCardId] ? (
-              <img
-                src={cardImages[expandedCardId]}
-                alt={expandedCard.name}
-                style={{ maxWidth: '100%', maxHeight: '80vh' }}
-              />
-            ) : (
-              <p>Loading image...</p>
-            )
-          ) : (
-            <p>Click a card to see its image</p>
-          )}
-        </div>
+        {/* ✅ Virtualized list */}
+        <Virtuoso
+          style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar
+          data={filteredCards}
+          itemContent={(index, card) => <CardRow key={card.id} card={card} />}
+        />
       </div>
 
-      {/* Footer at the bottom */}
+      {/* Right panel: card image */}
+      <div style={{ flex: 1, padding: '1rem' }}>
+        <h2>Card Image / Details</h2>
+        {expandedCardId && expandedCard ? (
+          cardImages[expandedCardId] ? (
+            <img
+              src={cardImages[expandedCardId]}
+              alt={expandedCard.name}
+              style={{ maxWidth: '100%', maxHeight: '80vh' }}
+            />
+          ) : (
+            <p>Loading image...</p>
+          )
+        ) : (
+          <p>Click a card to see its image</p>
+        )}
+      </div>
       <Footer />
     </div>
   );