✨ Improve left sidebar horizontal layers scroll (#6317)

CHANGES.md

@@ -29,6 +29,7 @@
 - Fix color gradient on texts [Taiga Issue #7488](https://tree.taiga.io/project/penpot/issue/7488)
 - Add support for self mentions [Taiga #10809](https://tree.taiga.io/project/penpot/issue/10809)
 - Fix team info settings alignment [Taiga #10869](https://tree.taiga.io/project/penpot/issue/10869)
+- Fix left sidebar horizontal scroll on nested layers [Taiga #10791](https://tree.taiga.io/project/penpot/issue/10791)
 
 ## 2.6.2 (Unreleased)
 

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?)
+            (when (and single? selected? @scroll-to-middle?)
-              (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))))))))]
+                    (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%;
+  width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
-  overflow-x: hidden;
+  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%;
+  width: var(--width);
-  overflow-x: hidden;
+  overflow-x: scroll;
   overflow-y: overlay;
   scrollbar-gutter: stable;
-  max-width: var(--width);
+
+  .element-list {
+    display: grid;
+  }
 }
 
 .pages-list {