Make these sticky

app/assets/stylesheets/events.css

@@ -69,10 +69,10 @@
 }
 
 .event__grid-column-title {
+  --z: 3;
+
   background-color: var(--color-bg);
-  inset-block-start: 0;
   padding-block: var(--grid-lines);
-  z-index: 3;
 }
 
 .event__timestamp {

app/assets/stylesheets/utilities.css

@@ -157,7 +157,7 @@
 
 /* Position */
 .position-relative { position: relative; }
-.position-sticky { position: sticky; }
+.position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }
 
 /* Fills */
 .fill { background-color: var(--color-bg); }

app/views/bubbles/show.html.erb

@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <% if @bubble.creating? && @bubble.can_recover_abandoned_creation? %>
-    <div class="flex align-center gap-half fill-selected justify-center border-block margin-block-end"
+    <div class="position-sticky flex align-center gap-half fill-selected justify-center border-block margin-block-end"
           style="--border-color: var(--color-selected-dark); --border-style: dashed; view-transition-name: draft-banner;">
       You have an unsaved work. Would you like to continue where you left off?
       <%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn txt-small btn--link", data: { turbo_action: "replace" } do %>
@@ -12,7 +12,7 @@
   <% end %>
 
   <% if @bubble.drafted? %>
-    <div class="flex align-center gap-half fill-selected justify-center border-block margin-block-end"
+    <div class="position-sticky flex align-center gap-half fill-selected justify-center border-block margin-block-end"
           style="--border-color: var(--color-selected-dark); --border-style: dashed; view-transition-name: draft-banner;">
       This is a draft, it’s only visible to you.
       <%= render "bubbles/publish", bubble: @bubble %>