From a575410a29e4cda844337451a9b6fd1f97651c0a Mon Sep 17 00:00:00 2001
From: Elena Torro <elenatorro@gmail.com>
Date: Thu, 8 May 2025 17:51:21 +0200
Subject: [PATCH 1/2] :bug: Fix default scroll visibility on layers sidebar

---
 frontend/src/app/main/ui/workspace/sidebar/layers.scss  | 2 +-
 frontend/src/app/main/ui/workspace/sidebar/sitemap.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 7d1038beed..c5e8374c54 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -227,7 +227,7 @@
   flex-direction: column;
   height: calc(100vh - var(--calculated-height));
   width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
-  overflow-x: scroll;
+  overflow-x: auto;
   overflow-y: overlay;
   scrollbar-gutter: stable;
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 4a0841e43a..256d0871f4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -39,7 +39,7 @@
   flex-direction: column;
   height: calc(-38px + var(--height, $s-200));
   width: var(--width);
-  overflow-x: scroll;
+  overflow-x: auto;
   overflow-y: overlay;
   scrollbar-gutter: stable;
 

From e4644ff506dd38409d90cc84e41470fe7165b20a Mon Sep 17 00:00:00 2001
From: Elena Torro <elenatorro@gmail.com>
Date: Wed, 14 May 2025 15:47:09 +0200
Subject: [PATCH 2/2] :wrench: Use scroll only on layers and refactor layer
 element name

---
 .../main/ui/workspace/sidebar/layer_name.scss | 36 +++++++++++++------
 .../main/ui/workspace/sidebar/sitemap.scss    |  2 +-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
index fb4f02e6e6..ae32b320a2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
@@ -7,46 +7,60 @@
 @import "refactor/common-refactor.scss";
 
 .element-name {
+  --element-name-color: var(--context-hover-color, var(--layer-row-foreground-color));
+  --element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color));
+  --element-name-opacity: var(--context-hover-opacity, $op-7);
+
   @include textEllipsis;
   @include bodySmallTypography;
+
+  color: var(--element-name-color);
+
   flex-grow: 1;
-  height: 100%;
+  block-size: 100%;
   align-content: center;
-  color: var(--context-hover-color, var(--layer-row-foreground-color));
+  min-inline-size: var(--sp-xl);
 
   &.selected {
     color: var(--layer-row-foreground-color-selected);
   }
 
   &.type-comp {
-    color: var(--context-hover-color, var(--layer-row-component-foreground-color));
+    color: var(--element-name-comp-color);
+
     &.hidden {
-      opacity: var(--context-hover-opacity, $op-7);
+      opacity: var(--element-name-opacity);
     }
   }
+
   &.hidden {
-    opacity: var(--context-hover-opacity, $op-7);
+    opacity: var(--element-name-opacity);
   }
 }
 
 .element-name-input {
+  --element-name-input-border-color: var(--input-border-color-focus);
+  --element-name-input-color: var(--layer-row-foreground-color);
+
   @include textEllipsis;
   @include bodySmallTypography;
   @include removeInputStyle;
+
   flex-grow: 1;
   height: $s-28;
-  max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+  max-inline-size: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
   margin: 0;
-  padding-left: $s-6;
+  padding-inline-start: $s-6;
   border-radius: $br-8;
-  border: $s-1 solid var(--input-border-color-focus);
-  color: var(--layer-row-foreground-color);
+  border: $s-1 solid var(--element-name-input-border-color);
+  color: var(--element-name-input-color);
 
   &.selected {
-    min-width: $s-88;
+    min-inline-size: $s-100;
   }
 }
 
 .element-name-touched {
-  color: var(--layer-row-component-foreground-color);
+  --element-name-touched-color: var(--layer-row-component-foreground-color);
+  color: var(--element-name-touched-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 256d0871f4..19ae17f79e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -39,7 +39,7 @@
   flex-direction: column;
   height: calc(-38px + var(--height, $s-200));
   width: var(--width);
-  overflow-x: auto;
+  overflow-x: hidden;
   overflow-y: overlay;
   scrollbar-gutter: stable;