From e5e8f321df48de1b2cfea0cff2f39364f3902c34 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 12 Feb 2025 13:37:03 -0600
Subject: [PATCH] Make these sticky

---
 app/assets/stylesheets/events.css    | 4 ++--
 app/assets/stylesheets/utilities.css | 2 +-
 app/views/bubbles/show.html.erb      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index ebdf36ee9..75635a719 100644
--- a/app/assets/stylesheets/events.css
+++ b/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 {
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 86a3298a0..54f33f5ee 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/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); }
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index f47d203f0..7d69ddfa1 100644
--- a/app/views/bubbles/show.html.erb
+++ b/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 %>