Move DB version/import to top bar, increase row spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/CardRow/CardRow.jsx

@@ -35,7 +35,7 @@ function CardRow({ card }) {
         onClick={() => setExpandedCardId(isExpanded ? null : card.id)}
         style={{
           display: 'flex', alignItems: 'center', gap: '12px',
-          padding: '9px 16px',
+          padding: '11px 16px',
           background: isExpanded ? '#1c1c1c' : 'transparent',
         }}
       >

src/components/Footer/Footer.jsx

@@ -32,20 +32,14 @@ function Footer({ onImportComplete }) {
 
   return (
     <>
-      <div style={{
-        display: 'flex', alignItems: 'center', gap: '16px',
-        background: '#1c1c1c', border: '1px solid #2a2a2a',
-        borderBottom: 'none', borderRadius: '8px 8px 0 0',
-        padding: '7px 16px', marginRight: '20px',
-        fontSize: '12px', color: '#666',
-      }}>
-        <span>DB Version: {dbVersion ?? 'Loading…'}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '12px', color: '#555' }}>
+        <span>DB: {dbVersion ?? '…'}</span>
         <button
           onClick={handleImport}
           disabled={importing}
           style={{
             background: '#2a2a2a', color: '#ccc', border: '1px solid #3a3a3a',
-            borderRadius: '5px', padding: '4px 12px', fontSize: '12px',
+            borderRadius: '5px', padding: '3px 10px', fontSize: '12px',
             cursor: importing ? 'not-allowed' : 'pointer',
             opacity: importing ? 0.5 : 1,
           }}

src/components/PrintingRow/PrintingRow.jsx

@@ -25,7 +25,7 @@ function PrintingRow({ card_id, printing, cols }) {
   return (
     <div style={{
       display: 'grid', gridTemplateColumns: cols,
-      gap: '8px', padding: '5px 16px 5px 32px',
+      gap: '8px', padding: '7px 16px 7px 32px',
       alignItems: 'center', opacity: loading ? 0.5 : 1,
     }}>
       <span style={{ fontFamily: 'monospace', fontSize: '11px', color: '#555' }}>

src/pages/HomePage.jsx

@@ -88,13 +88,16 @@ function HomePage() {
 
       {/* Stats bar */}
       <div style={{
-        display: 'flex', gap: '2rem', padding: '6px 16px', flexShrink: 0,
+        display: 'flex', alignItems: 'center', gap: '2rem', padding: '6px 16px', flexShrink: 0,
         background: '#1c1c1c', borderBottom: '1px solid #2a2a2a',
         fontSize: '12px', color: '#666',
       }}>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.total.toLocaleString()}</strong> cards in DB</span>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.uniqueOwned.toLocaleString()}</strong> unique owned</span>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
+        <div style={{ marginLeft: 'auto' }}>
+          <Footer onImportComplete={loadCards} />
+        </div>
       </div>
 
       {/* Main panels */}
@@ -162,10 +165,6 @@ function HomePage() {
         </div>
       </div>
 
-      {/* Footer */}
-      <div style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
-        <Footer onImportComplete={loadCards} />
-      </div>
     </div>
   );
 }