From e910d3d668f07a3c96bacd88b7af0de366a87d1b Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Fri, 29 Aug 2025 16:28:35 -0400
Subject: [PATCH] WIP: Sticky editor toolbar styles

---
 .../components/formatting_toolbar.vue         |  2 +-
 .../components/content_editor.scss            | 22 +++++++++++++++++++
 .../page_bundles/merge_requests.scss          | 10 +++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index da165935dcd260..a9c49cf3163f17 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -105,7 +105,7 @@ export default {
 </script>
 <template>
   <div
-    class="gl-border-b gl-flex gl-w-full gl-flex-wrap gl-items-center gl-gap-y-2 gl-rounded-t-base gl-border-default gl-px-3 gl-py-3"
+    class="rte-formatting-toolbar gl-border-b gl-flex gl-w-full gl-flex-wrap gl-items-center gl-gap-y-2 gl-rounded-t-lg gl-border-default gl-px-3 gl-py-3"
     data-testid="formatting-toolbar"
     role="toolbar"
     :aria-label="i18n.editorToolbar"
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index aa1c472b6a0624..9e135d31abf992 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -410,3 +410,25 @@
   position: relative;
   z-index: 0;
 }
+
+.rte-formatting-toolbar, .md-header {
+  position: sticky;
+  top: calc(calc(var(--header-height) + calc(var(--system-header-height) + var(--performance-bar-height))) + var(--top-bar-height));
+  @apply gl-bg-default;
+  z-index: 2;
+
+  .page-with-panels & {
+    top: -1px; // 1px for border collapsing
+  }
+}
+
+// Deal with work item sticky header
+.work-item-detail div:has(.issue-sticky-header) + section {
+  .rte-formatting-toolbar, .md-header {
+    top: calc(calc(var(--header-height) + calc(var(--system-header-height) + var(--performance-bar-height))) + var(--top-bar-height) + var(--work-item-sticky-header-height)) !important;
+   
+    .page-with-panels & {
+      top: calc(var(--work-item-sticky-header-height) - 1px) !important; // 1px for border collapsing
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 9cc287a925a5ac..d3f1894b98f128 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -958,6 +958,12 @@ $diff-file-header-top: 11px;
   }
 }
 
-.merge-request-overview .md-header {
-  top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height});
+.merge-request-overview {
+  .md-header, .rte-formatting-toolbar {
+    top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height});
+
+    .page-with-panels & {
+      top: calc(#{$mr-sticky-header-height} - 2px); // Minus two borders
+    }
+  }
 }
-- 
GitLab