fix?

src/pages/HomePage.jsx

@@ -1,4 +1,3 @@
-//HomePage.jsx
 import React, { useEffect, useState, useContext } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import CardRow from '../components/CardRow/CardRow';
@@ -35,11 +34,8 @@ 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));
@@ -50,7 +46,6 @@ 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())
@@ -58,37 +53,41 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <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} />
+    <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} />
 
-        {/* ✅ 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>
+          <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' }}>
-        <h2>Card Image / Details</h2>
-        {expandedCardId && expandedCard ? (
-          cardImages[expandedCardId] ? (
-            <img
-              src={cardImages[expandedCardId]}
-              alt={expandedCard.name}
-              style={{ maxWidth: '100%', maxHeight: '80vh' }}
-            />
+        {/* 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>Loading image...</p>
-          )
-        ) : (
-          <p>Click a card to see its image</p>
-        )}
+            <p>Click a card to see its image</p>
+          )}
+        </div>
       </div>
+
+      {/* Footer at the bottom */}
       <Footer />
     </div>
   );