From 6c2555b7c9e379ebb2f6bfc482cd6b33acc11c0b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 11 Jun 2025 02:09:59 -0700
Subject: [PATCH] Fix sticky toolbar in editor

---
 src/lib/components/admin/AdminPage.svelte        | 2 +-
 src/lib/components/admin/Editor.svelte           | 6 ------
 src/lib/components/admin/EditorWithUpload.svelte | 7 ++++---
 src/lib/components/edra/headless/style.css       | 4 ++--
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/admin/AdminPage.svelte b/src/lib/components/admin/AdminPage.svelte
index 624a5c9..3bfe464 100644
--- a/src/lib/components/admin/AdminPage.svelte
+++ b/src/lib/components/admin/AdminPage.svelte
@@ -32,7 +32,7 @@
 		width: calc(100% - #{$unit-6x});
 		max-width: 900px; // Much wider for admin
 		min-height: calc(100vh - #{$unit-16x}); // Full height minus margins
-		overflow: hidden; // Ensure border-radius clips content
+		overflow: visible;
 
 		&:first-child {
 			margin-top: 0;
diff --git a/src/lib/components/admin/Editor.svelte b/src/lib/components/admin/Editor.svelte
index 7419818..18e7d34 100644
--- a/src/lib/components/admin/Editor.svelte
+++ b/src/lib/components/admin/Editor.svelte
@@ -104,18 +104,13 @@
 	.editor-wrapper {
 		width: 100%;
 		min-height: var(--min-height);
-		height: 100%;
 		background: white;
-		overflow: hidden;
-		position: relative;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.editor-container {
 		flex: 1;
-		overflow-y: auto;
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		padding: 0;
@@ -141,7 +136,6 @@
 		background: $grey-95;
 		padding: $unit-2x;
 		position: sticky;
-		top: 0;
 		z-index: 10;
 		overflow-x: auto;
 		overflow-y: hidden;
diff --git a/src/lib/components/admin/EditorWithUpload.svelte b/src/lib/components/admin/EditorWithUpload.svelte
index 548aa48..6877fca 100644
--- a/src/lib/components/admin/EditorWithUpload.svelte
+++ b/src/lib/components/admin/EditorWithUpload.svelte
@@ -737,7 +737,7 @@
 		box-sizing: border-box;
 		padding: 0.5rem;
 		position: sticky;
-		top: 0;
+		top: 68px;
 		z-index: 10;
 		overflow-x: auto;
 		overflow-y: hidden;
@@ -745,14 +745,15 @@
 		-webkit-overflow-scrolling: touch;
 		width: 100%;
 		flex-shrink: 0;
+		backdrop-filter: blur(10px);
+		background: rgba(255, 255, 255, 0.9);
 	}
 
 	.edra-editor {
 		width: 100%;
 		flex: 1;
 		min-width: 0;
-		overflow-x: hidden;
-		overflow-y: hidden;
+		overflow: visible;
 		box-sizing: border-box;
 	}
 
diff --git a/src/lib/components/edra/headless/style.css b/src/lib/components/edra/headless/style.css
index df703f8..71ae0ed 100644
--- a/src/lib/components/edra/headless/style.css
+++ b/src/lib/components/edra/headless/style.css
@@ -41,14 +41,14 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--edra-gap);
-	overflow: auto;
+	overflow: visible;
 }
 
 .edra-editor {
 	padding: 0 var(--edra-padding);
 	flex-grow: 1;
 	padding-left: 2rem;
-	overflow-y: hidden;
+	overflow: visible;
 	box-sizing: border-box;
 }