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,22 +53,23 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', height: '100vh' }}>
+    <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' }}>
+        <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
+            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' }}>
+        <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
           <h2>Card Image / Details</h2>
           {expandedCardId && expandedCard ? (
             cardImages[expandedCardId] ? (
@@ -89,6 +85,9 @@ function HomePage() {
             <p>Click a card to see its image</p>
           )}
         </div>
+      </div>
+
+      {/* Footer at the bottom */}
       <Footer />
     </div>
   );