diff --git a/src/index.html b/src/index.html
index 01818c11..8fb66837 100644
--- a/src/index.html
+++ b/src/index.html
@@ -135,7 +135,7 @@ <h1 class="min-w-0 text-xl font-bold tracking-tight text-slate-900 dark:text-whi
       </div>
     </main>
 
-    <footer class="px-4 sm:px-8 pb-[3.5px] sm:pb-[19.5px] text-center text-[10px] leading-tight text-slate-400 dark:text-slate-500">
+    <footer class="px-4 sm:px-8 pb-[3.5px] sm:pb-[19.5px] text-center text-[10px] leading-tight text-slate-500 dark:text-slate-400">
       <a href="https://github.com/daggerok/SPDR" target="_blank" rel="noopener noreferrer" class="underline decoration-dotted underline-offset-2 hover:text-slate-600 dark:hover:text-slate-200">daggerok &copy; <span id="footer-year">2026</span></a>
     </footer>
     <script>document.getElementById('footer-year').textContent = String(new Date().getFullYear());</script>
diff --git a/src/main.tsx b/src/main.tsx
index 8f5db15a..687bd810 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3571,8 +3571,12 @@ function exportTxt(): void {
 
 function fitTableHeight(): void {
   const rect = el.tableScroll.getBoundingClientRect();
-  const bottomPad = window.innerWidth < 640 ? 12 : 24;
-  const max = Math.max(240, window.innerHeight - rect.top - bottomPad);
+  // below the table: the border of its card, the bottom padding of main (one gutter) and the footer, so the footer ends at the bottom of the window
+  const card = el.tableScroll.parentElement;
+  const main = document.querySelector('main');
+  const footer = document.querySelector('footer');
+  const below = (card ? parseFloat(getComputedStyle(card).borderBottomWidth) : 0) + (main ? parseFloat(getComputedStyle(main).paddingBottom) : 0) + (footer ? footer.getBoundingClientRect().height : 0);
+  const max = Math.max(240, window.innerHeight - rect.top - below);
   el.tableScroll.style.maxHeight = `${max}px`;
 }