Merge pull request #3645 from AlchemyCMS/backport/8.0-stable/pr-3636

[8.0-stable] fix(elements-window): Use fixed position

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -252,7 +252,8 @@ def alchemy_body_class
           controller_name,
           action_name,
           content_for(:main_menu_style),
-          content_for(:alchemy_body_class)
+          content_for(:alchemy_body_class),
+          "elements-window-visible"
         ].compact
       end
 

app/assets/builds/alchemy/dark-theme.css

@@ -108,6 +108,7 @@
   /* Elements */
   --elements-window-width: 0px;
   --elements-window-min-width: 400px;
+  --elements-window-transition-easing: ease-in-out;
 
   /* Form */
   --form-left-column-width: 35%;

app/assets/builds/alchemy/light-theme.css

@@ -5,7 +5,7 @@
 
 #alchemy_elements_window {
   --width: var(--elements-window-width, 100vw);
-  position: absolute;
+  position: fixed;
   right: 0;
   top: var(--top-menu-height);
   z-index: 20;
@@ -21,7 +21,8 @@
     --elements-window-background-color,
     var(--dialog-background-color)
   );
-  transition: var(--transition-duration) ease-in-out;
+  transition: var(--transition-duration)
+    var(--elements-window-transition-easing);
   transform: translate3d(100%, 0, 0);
 
   .elements-window-visible & {
@@ -97,6 +98,7 @@ alchemy-elements-window {
   --scrollable-elements-offset: calc(
     var(--top-menu-height) + var(--toolbar-height)
   );
+  display: block;
 }
 
 #main-content-elements {