diff --git a/src/app.css b/src/app.css
index da6ffd223f..c72b2fdee1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,11 +9,19 @@
 @layer base {
   :root {
     --top-nav-height: 3rem;
+    --banner-height: 0px;
+    --bottom-nav-height: 4rem;
     --panel-collapsed-w: 60px;
     --panel-expanded-w: 240px;
     --panel-h: 73dvh;
   }
 
+  @media (min-width: 768px) {
+    :root {
+      --bottom-nav-height: 0px;
+    }
+  }
+
   *,
   html,
   body {
diff --git a/src/lib/holocene/banner/banner.svelte b/src/lib/holocene/banner/banner.svelte
index 0e28278803..94dcf2ab61 100644
--- a/src/lib/holocene/banner/banner.svelte
+++ b/src/lib/holocene/banner/banner.svelte
@@ -34,6 +34,7 @@
 </script>
 
 <script lang="ts">
+  import { BROWSER } from 'esm-env';
   import { twMerge as merge } from 'tailwind-merge';
 
   import Button from '$lib/holocene/button.svelte';
@@ -69,13 +70,26 @@
 
   $: show = message && !$dismissedBanners[id];
 
+  let bannerHeight = 0;
+
+  $: if (BROWSER) {
+    document.documentElement.style.setProperty(
+      '--banner-height',
+      show ? `${bannerHeight}px` : '0px',
+    );
+  }
+
   const dismissBanner = () => {
     $dismissedBanners[id] = true;
   };
 </script>
 
 {#if show}
-  <section class={merge(types({ type }), className)} {...$$restProps}>
+  <section
+    class={merge(types({ type }), className)}
+    bind:clientHeight={bannerHeight}
+    {...$$restProps}
+  >
     <span class="flex items-center gap-2">
       {#if icon}
         <Icon name={icon} />
diff --git a/src/lib/holocene/main-content-container.svelte b/src/lib/holocene/main-content-container.svelte
index d3f4b4a380..a40e8a43f4 100644
--- a/src/lib/holocene/main-content-container.svelte
+++ b/src/lib/holocene/main-content-container.svelte
@@ -10,7 +10,11 @@
   let { children, main, footer }: Props = $props();
 </script>
 
-<div id="content-wrapper" class="relative h-full w-max flex-auto overflow-auto">
+<div
+  id="content-wrapper"
+  class="relative h-full w-max flex-auto overflow-auto"
+  style="scroll-padding-top: calc(var(--top-nav-height, 3rem) + var(--banner-height, 0)); scroll-padding-bottom: var(--bottom-nav-height, 0);"
+>
   {@render children?.()}
   <main id="content" tabindex="-1" class="pb-16 md:pb-0">
     {@render main?.()}
diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
index e2c92002a0..98240fb42b 100644
--- a/src/lib/holocene/table/paginated-table/index.svelte
+++ b/src/lib/holocene/table/paginated-table/index.svelte
@@ -27,6 +27,7 @@
   export { className as class };
 
   let tableContainer: HTMLDivElement;
+  let footerHeight = 0;
 
   $: tableOffset = tableContainer?.offsetTop
     ? tableContainer.offsetTop + 32
@@ -45,6 +46,8 @@
   id="{$$restProps['id']}-container"
   bind:this={tableContainer}
   style="max-height: {maxHeight || `calc(100vh - ${tableOffset}px)`};
+  scroll-padding-top: var(--table-header-h, 2.25rem);
+  scroll-padding-bottom: {footerHeight}px;
 
   --table-header-h: 2.25rem;"
 >
@@ -63,6 +66,7 @@
     {#if visibleItems.length}
       <div
         class="surface-primary sticky bottom-0 left-0 flex w-full grow items-center justify-between gap-2 border-t border-subtle px-4 py-2"
+        bind:clientHeight={footerHeight}
       >
         <slot name="actions-start" />
         <slot name="actions-center" />