Sticky content editor region tabs

Author: matthiask

CHANGELOG.rst

@@ -7,6 +7,8 @@ Next version
 
 - Replaced the plugin expanding and collapsing animation with a version for
   modern browsers.
+- Made the content editor region tabs stick to the top of the browser window
+  when scrolling down.
 
 
 7.4 (2025-07-02)

content_editor/static/content_editor/content_editor.css

@@ -3,6 +3,14 @@ html {
   overflow-x: hidden;
 }
 
+.tabs:has(.machine-collapse) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--body-bg);
+  border-bottom: 1px solid var(--hairline-color, #e8e8e8);
+}
+
 .machine-collapse {
   order: 1;
   margin-left: auto;
@@ -16,6 +24,7 @@ html {
 .order-machine {
   padding: 10px 10px 20px 30px;
   border: 1px solid var(--hairline-color, #e8e8e8);
+  border-top: none;
   position: relative;
 
   display: flex;
@@ -197,6 +206,14 @@ h3[draggable] {
   display: none;
 }
 
+.collapse-items .plugin-button {
+  padding: 0px 4px;
+}
+
+.collapse-items .plugin-button-icon {
+  margin-right: 0;
+}
+
 .collapse-items .uncollapse-all {
   display: none;
 }

content_editor/static/content_editor/tabbed_fieldsets.css

@@ -28,7 +28,7 @@
   text-transform: none;
   letter-spacing: 0;
   float: left;
-  padding: 10px 15px;
+  padding: 8px 10px;
   margin: 0 4px 0 0;
   cursor: pointer;
   font-weight: bold;