✨ Improve left sidebar horizontal layers scroll (#6317)

frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs

@@ -355,18 +355,14 @@
             first-child-node (dom/get-first-child parent-node)
 
             subid
-            (when (and single? selected?)
-              (let [scroll-to @scroll-to-middle?]
-                (ts/schedule
-                 100
-                 #(when (and node scroll-node)
-                    (let [scroll-distance-ratio (dom/get-scroll-distance-ratio node scroll-node)
-                          scroll-behavior (if (> scroll-distance-ratio 1) "instant" "smooth")]
-                      (if scroll-to
-                        (dom/scroll-into-view! first-child-node #js {:block "center" :behavior scroll-behavior  :inline "start"})
-                        (do
-                          (dom/scroll-into-view-if-needed! first-child-node #js {:block "center" :behavior scroll-behavior :inline "start"})
-                          (reset! scroll-to-middle? true))))))))]
+            (when (and single? selected? @scroll-to-middle?)
+              (ts/schedule
+               100
+               #(when (and node scroll-node)
+                  (let [scroll-distance-ratio (dom/get-scroll-distance-ratio node scroll-node)
+                        scroll-behavior (if (> scroll-distance-ratio 1) "instant" "smooth")]
+                    (dom/scroll-into-view-if-needed! first-child-node #js {:block "center" :behavior scroll-behavior :inline "start"})
+                    (reset! scroll-to-middle? true)))))]
 
         #(when (some? subid)
            (rx/dispose! subid))))

frontend/src/app/main/ui/workspace/sidebar/layer_item.scss

@@ -91,6 +91,9 @@
 .element-actions {
   display: none;
   height: 100%;
+  display: flex;
+  align-items: end;
+
   &.selected {
     display: flex;
   }

frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs

@@ -102,7 +102,8 @@
     (if ^boolean edition?
       [:input
        {:class (stl/css :element-name
-                        :element-name-input)
+                        :element-name-input
+                        :selected is-selected)
         :style {"--depth" depth "--parent-size" parent-size}
         :type "text"
         :ref ref

frontend/src/app/main/ui/workspace/sidebar/layer_name.scss

@@ -11,6 +11,7 @@
   @include bodySmallTypography;
   flex-grow: 1;
   color: var(--context-hover-color, var(--layer-row-foreground-color));
+
   &.selected {
     color: var(--layer-row-foreground-color-selected);
   }
@@ -25,6 +26,7 @@
     opacity: var(--context-hover-opacity, $op-7);
   }
 }
+
 .element-name-input {
   @include textEllipsis;
   @include bodySmallTypography;
@@ -37,7 +39,12 @@
   border-radius: $br-8;
   border: $s-1 solid var(--input-border-color-focus);
   color: var(--layer-row-foreground-color);
+
+  &.selected {
+    min-width: $s-88;
+  }
 }
+
 .element-name-touched {
   color: var(--layer-row-component-foreground-color);
 }

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -226,11 +226,13 @@
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--calculated-height));
-  width: 100%;
-  overflow-x: hidden;
+  width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
+  overflow-x: scroll;
   overflow-y: overlay;
   scrollbar-gutter: stable;
+
   .element-list {
-    width: 100%;
+    width: var(--width);
+    display: grid;
   }
 }

frontend/src/app/main/ui/workspace/sidebar/sitemap.scss

@@ -38,11 +38,14 @@
   display: flex;
   flex-direction: column;
   height: calc(-38px + var(--height, $s-200));
-  width: 100%;
-  overflow-x: hidden;
+  width: var(--width);
+  overflow-x: scroll;
   overflow-y: overlay;
   scrollbar-gutter: stable;
-  max-width: var(--width);
+
+  .element-list {
+    display: grid;
+  }
 }
 
 .pages-list {