Fixing/simplifying Layout editor toolbox stickyness and height restriction to viewport

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Directives/Toolbox.js

@@ -181,29 +181,7 @@
                     }
                 ],
                 templateUrl: environment.templateUrl("Toolbox"),
-                replace: true,
-                link: function (scope, element) {
-                    var toolbox = element.find(".layout-toolbox");
-                    $(window).on("resize scroll", function (e) {
-                        var canvas = element.parent().find(".layout-canvas");
-                        // If the canvas is taller than the toolbox, make the toolbox sticky-positioned within the editor
-                        // to help the user avoid excessive vertical scrolling.
-                        var canvasIsTaller = !!canvas && canvas.height() > toolbox.height();
-                        var windowPos = $(window).scrollTop();
-                        if (canvasIsTaller && windowPos > element.offset().top + element.height() - toolbox.height()) {
-                            toolbox.addClass("sticky-bottom");
-                            toolbox.removeClass("sticky-top");
-                        }
-                        else if (canvasIsTaller && windowPos > element.offset().top) {
-                            toolbox.addClass("sticky-top");
-                            toolbox.removeClass("sticky-bottom");
-                        }
-                        else {
-                            toolbox.removeClass("sticky-top");
-                            toolbox.removeClass("sticky-bottom");
-                        }
-                    });
-                }
+                replace: true
             };
         }
     ]);

src/Orchard.Web/Modules/Orchard.Layouts/Assets/Less/LayoutEditor/Editor.less

@@ -19,10 +19,10 @@
     display: flex;
     margin-top: 1em;
     font-size: @font-size;
-    align-items: stretch;
 
     > .layout-canvas-wrapper {
-        flex-grow: 1;
+        flex: 1 1;
+        height: fit-content;
         background-color: @gray-bg;
         border: 1px solid @gray-border;
 

src/Orchard.Web/Modules/Orchard.Layouts/Assets/Less/LayoutEditor/Toolbox.less

@@ -22,56 +22,22 @@ body {
 
 .layout-editor {
     > .layout-toolbox-wrapper {
-        margin-left: @container-padding;
-        width: 218px;
-        -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-        flex-shrink: 0;
-        /* forcing the toolbox height to be smaller than the viewport height
-            so it is always visible and scrollable*/
-        max-height: calc(100vh - 80px);
-        overflow-x: clip;
-        overflow-y: auto;
-        /* forcing the toolbox to stay sticked at the the top of its container */
-        position: -webkit-sticky;
         position: sticky;
-        top: 0;
-
-        &::-webkit-scrollbar {
-            width: 2px;
-        }
-
-        &::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgb(0, 0, 0, .3);
-            border-radius: 1px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: rgba(0,0,0,0.3);
-        }
+        top: 1vh;
+        padding-left: @container-padding;
+        width: 220px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        min-height: 400px;
+        max-height: 98vh;
+        height: 100%;
 
         > .layout-toolbox {
             border: 1px solid @gray-border;
-            width: 220px;
-            min-height: 400px;
             padding: @container-padding / 2;
             background-color: @gray-bg;
 
-            &.sticky-top {
-                position: fixed;
-                top: 0;
-                max-height: 100%;
-                overflow-y: auto;
-            }
-
-            &.sticky-bottom {
-                position: absolute;
-                bottom: 0;
-            }
-
             .layout-toolbox-group {
-                margin-top: @container-padding;
-
                 .layout-toolbox-group-heading {
                     display: block;
                     margin-bottom: @container-padding / 3;