From ed27e12a0c9c2759536d0dadc4e68ded9db9afc0 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Wed, 10 Jun 2026 17:48:05 -0400
Subject: [PATCH 1/2] [WCAG 2.4.11] Add scroll-padding to prevent focus
 obscured by sticky elements

Ensures keyboard-focused items are not hidden behind the top nav, sticky
banners, bottom nav, or sticky table headers/footers per SC 2.4.11.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app.css                                      |  8 ++++++++
 src/lib/holocene/banner/banner.svelte            | 16 +++++++++++++++-
 src/lib/holocene/main-content-container.svelte   |  6 +++++-
 .../holocene/table/paginated-table/index.svelte  |  5 ++++-
 4 files changed, 32 insertions(+), 3 deletions(-)

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..16f6bbf10d 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, 0px)); scroll-padding-bottom: var(--bottom-nav-height, 0px);"
+>
   {@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..5fcfeb73cf 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,7 +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;"
 >
   {#if loading}
@@ -63,6 +65,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" />

From a67445ca05790d626f74c52ee012ba354246afa7 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Thu, 11 Jun 2026 12:23:01 -0400
Subject: [PATCH 2/2] fix: resolve stylelint length-zero-no-unit and
 custom-property-empty-line-before errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/holocene/main-content-container.svelte      | 2 +-
 src/lib/holocene/table/paginated-table/index.svelte | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/holocene/main-content-container.svelte b/src/lib/holocene/main-content-container.svelte
index 16f6bbf10d..a40e8a43f4 100644
--- a/src/lib/holocene/main-content-container.svelte
+++ b/src/lib/holocene/main-content-container.svelte
@@ -13,7 +13,7 @@
 <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, 0px)); scroll-padding-bottom: var(--bottom-nav-height, 0px);"
+  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">
diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
index 5fcfeb73cf..98240fb42b 100644
--- a/src/lib/holocene/table/paginated-table/index.svelte
+++ b/src/lib/holocene/table/paginated-table/index.svelte
@@ -48,6 +48,7 @@
   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;"
 >
   {#if loading}