Make controls sticky.

css/builder.css

@@ -11,6 +11,8 @@
 
   --lp-btn-bg-color: #0550E6;
   --lp-btn-fg-color: #fff;
+
+  --lp-controls-sticky-top: 170px;
 }
 
 .lp-builder {
@@ -41,6 +43,7 @@
 }
 .js-lpb-component {
   position: relative;
+  margin: 0 auto;
 }
 .lpb-hover-label {
   background: #888;
@@ -101,11 +104,6 @@
 .js-lpb-component[data-active="true"] .js-lpb-region > .lpb-btn--add:focus {
   opacity: 1;
 }
-
-
-
-
-
 .lpb-layout .lpb-layout-label {
   position: absolute;
   right: 0;
@@ -113,24 +111,22 @@
   border: 1px dotted #ccc;
   font-size: small;
 }
-
-
 .lpb-controls__wrapper {
   position: absolute;
 }
 .lpb-controls {
-  position: absolute;
+  position: sticky;
   z-index: 80;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, calc(-100% - 15px));
+  top: var(--lp-controls-sticky-top);
+  margin: 0 auto;
+  transform: translateY(calc(-100% - 15px));
   display: flex;
   padding: 2px 2px 2px 15px;
   opacity: 0;
   border-radius: 4px;
   background-color: var(--lp-controls-bg-color, #fff);
   color: var(--lp-controls-fg-color, #000);
-
+  width: min-content;
   & .lpb-controls-label {
     padding: 0 5px 0 0;
     text-transform: uppercase;