Revert "fix?"

This reverts commit 42e3620603.

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,23 +58,22 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+    <div style={{ display: 'flex', height: '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' }}>
+      <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem' }}>
         <h2>Card List</h2>
         <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
 
+        {/* ✅ Virtualized list */}
         <Virtuoso
-            style={{ height: '100%' }}
+          style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar
           data={filteredCards}
           itemContent={(index, card) => <CardRow key={card.id} card={card} />}
         />
       </div>
 
       {/* Right panel: card image */}
-        <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
+      <div style={{ flex: 1, padding: '1rem' }}>
         <h2>Card Image / Details</h2>
         {expandedCardId && expandedCard ? (
           cardImages[expandedCardId] ? (
@@ -85,9 +89,6 @@ function HomePage() {
           <p>Click a card to see its image</p>
         )}
       </div>
-      </div>
-
-      {/* Footer at the bottom */}
       <Footer />
     </div>
   );