claude fix

src/pages/HomePage.jsx

@@ -58,22 +58,24 @@ function HomePage() {
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
-    <div style={{ display: 'flex', height: '100vh' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      {/* Main content row */}
+      <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', overflow: 'hidden' }}>
           <h2>Card List</h2>
           <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
 
           {/* ✅ Virtualized list */}
           <Virtuoso
-          style={{ height: 'calc(100vh - 100px)' }} // Adjust for header/search bar
+            style={{ height: 'calc(100vh - 100px)' }}
             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 +91,9 @@ function HomePage() {
             <p>Click a card to see its image</p>
           )}
         </div>
+      </div>
+
+      {/* Footer: always at the bottom */}
       <Footer />
     </div>
   );