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.
This commit is contained in:
Rotimi Best
2026-08-03 02:28:19 +01:00
committed by GitHub
parent dc55f936a1
commit 7e8bd3d718
@@ -45,8 +45,12 @@
});
</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
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',
@@ -74,4 +78,3 @@
class="ui:h-px ui:shrink-0"
aria-hidden="true"
></div>
</div>