From 7e8bd3d71866eec64ff79d0f1dc7a00294cd65f8 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 3 Aug 2026 02:28:19 +0100
Subject: [PATCH] fix(ui): let Page.SettingsActions sticky bar escape its
 wrapper (#825)

The bar was nested in an extra shrink-0 div together with the dock
sentinel. A sticky element is constrained to its containing block, and
that wrapper is only as tall as the bar plus a 1px sentinel, so the bar
had roughly 1px of travel. It could never float over the page content and
only ever appeared where it naturally sits, at the end of the page.

Render the bar and the sentinel as siblings so the containing block is
Page.Root and the bar has the full page to travel. Measured in headless
Chrome at scrollY=600 in a 713px viewport: wrapped bar bottom was 2484
(off screen), sibling bar bottom is 713, pinned to the viewport.

Also raise the bar from z-10 to z-50. The editor root is relative z-50,
so it painted over the bar on any settings page with an editor, such as
the course welcome email. Matching 50 rather than exceeding it wins the
tie on DOM order while keeping body-portaled dialogs and sheets above the
bar.

ref is now bound to the sticky element rather than the removed wrapper.
No dashboard caller binds ref today.
---
 .../base/page/page-settings-actions.svelte    | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/ui/src/base/page/page-settings-actions.svelte b/packages/ui/src/base/page/page-settings-actions.svelte
index 2d10ea3d..434e3fc6 100644
--- a/packages/ui/src/base/page/page-settings-actions.svelte
+++ b/packages/ui/src/base/page/page-settings-actions.svelte
@@ -45,33 +45,36 @@
   });
 </script>
 
-<div bind:this={ref} class={cn('ui:shrink-0', className)} {...restProps}>
-  <div data-slot="page-settings-actions" class="ui:sticky ui:bottom-0 ui:z-10 ui:pb-4">
-    <div
-      class={cn(
-        'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between',
-        'ui:rounded-lg ui:border ui:border-border ui:bg-background ui:p-4 ui:transition-shadow',
-        !isDocked && 'ui:shadow-md',
-        contentClassName
-      )}
-    >
-      <p class="ui:text-sm ui:text-muted-foreground">{statusLabel}</p>
+<div
+  bind:this={ref}
+  data-slot="page-settings-actions"
+  class={cn('ui:sticky ui:bottom-0 ui:z-50 ui:pb-4 ui:shrink-0', className)}
+  {...restProps}
+>
+  <div
+    class={cn(
+      'ui:flex ui:flex-col ui:gap-3 ui:sm:flex-row ui:sm:items-center ui:sm:justify-between',
+      'ui:rounded-lg ui:border ui:border-border ui:bg-background ui:p-4 ui:transition-shadow',
+      !isDocked && 'ui:shadow-md',
+      contentClassName
+    )}
+  >
+    <p class="ui:text-sm ui:text-muted-foreground">{statusLabel}</p>
 
-      <div class="ui:flex ui:shrink-0 ui:items-center ui:justify-end ui:gap-2">
-        <Button variant="ghost" type="button" disabled={actionsDisabled} onclick={onDiscard}>
-          {discardLabel}
-        </Button>
-        <Button type="button" {loading} disabled={actionsDisabled || disabled} onclick={onSave}>
-          {saveLabel}
-        </Button>
-      </div>
+    <div class="ui:flex ui:shrink-0 ui:items-center ui:justify-end ui:gap-2">
+      <Button variant="ghost" type="button" disabled={actionsDisabled} onclick={onDiscard}>
+        {discardLabel}
+      </Button>
+      <Button type="button" {loading} disabled={actionsDisabled || disabled} onclick={onSave}>
+        {saveLabel}
+      </Button>
     </div>
   </div>
-
-  <div
-    bind:this={dockSentinel}
-    data-slot="page-settings-actions-sentinel"
-    class="ui:h-px ui:shrink-0"
-    aria-hidden="true"
-  ></div>
 </div>
+
+<div
+  bind:this={dockSentinel}
+  data-slot="page-settings-actions-sentinel"
+  class="ui:h-px ui:shrink-0"
+  aria-hidden="true"
+></div>