Merge pull request #3524 from penpot/juan-ester-ui-review

💄 Adds styling changes to new UI

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -80,7 +80,7 @@
   --layer-row-foreground-color: var(--color-foreground-secondary);
   --layer-row-foreground-color-hover: var(--color-accent-primary);
   --layer-row-foreground-color-selected: var(--color-accent-primary);
-  --layer-row-foreground-color-drag: var(--color-accent-primary);
+  --layer-row-foreground-color-drag: var(--color-select);
   --layer-row-foreground-color-focus: var(--color-foreground-primary);
   --layer-row-border-color-focus: var(--color-accent-primary);
   --layer-child-row-background-color: var(--color-background-tertiary);
@@ -150,7 +150,7 @@
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-border-color: var(--color-accent-primary);
   --assets-item-background-color-drag: var(--color-accent-primary-muted);
-  --assets-item-border-color-drag: var(--color-accent-primary);
+  --assets-item-border-color-drag: var(--color-select);
   --assets-component-background-color: var(--white); // We don't want this color to change with palette
 
   --radio-btns-background-color: var(--color-background-tertiary);
@@ -159,8 +159,6 @@
   --radio-btn-foreground-color-selected: var(--color-accent-primary);
   --radio-btn-border-color-selected: var(--color-background-quaternary);
 
-  --modal-background-color: var(--color-background-primary);
-
   --library-name-foreground-color: var(--color-foreground-primary);
   --library-content-foreground-color: var(--color-foreground-secondary);
 
@@ -188,7 +186,7 @@
   --user-count-background-color: var(--color-background-secondary);
   --user-count-foreground-color: var(--color-accent-primary);
 
-  --modal-background-color: var(--color-background-quaternary);
+  --modal-background-color: var(--color-background-primary);
   --modal-foreground-color: var(--color-foreground-primary);
   --modal-foreground-color-secondary: var(--color-foreground-secondary);
 }

frontend/resources/styles/common/refactor/mixins.scss

@@ -36,6 +36,13 @@
   line-height: 1.2;
 }
 
+@mixin titleBigTipography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-14;
+  font-weight: $fw400;
+  line-height: 1.2;
+}
+
 @mixin textEllipsis {
   max-width: 99%;
   overflow: hidden;

frontend/resources/styles/common/refactor/spacing.scss

@@ -41,6 +41,7 @@ $s-148: calc(var(--s-4) * 37);
 $s-152: calc(var(--s-4) * 38);
 $s-160: calc(var(--s-4) * 40);
 $s-168: calc(var(--s-4) * 42);
+$s-180: calc(var(--s-4) * 45);
 $s-184: calc(var(--s-4) * 46);
 $s-192: calc(var(--s-4) * 48);
 $s-196: calc(var(--s-4) * 49);

frontend/src/app/main/ui/components/tab_container.scss

@@ -26,7 +26,6 @@
   flex-direction: row;
   gap: $s-2;
   height: $s-32;
-  padding: $s-2 $s-2 $s-2 $s-2;
   border-radius: $br-8;
   background: var(--color-background-secondary);
   cursor: pointer;
@@ -40,7 +39,7 @@
     .tab-container-tab-title {
       @include flexCenter;
       @include tabTitleTipography;
-      height: $s-28;
+      height: 100%;
       width: 100%;
       padding: 0 $s-8;
       margin: 0;
@@ -65,7 +64,7 @@
     height: 100%;
     width: $s-24;
     min-width: $s-24;
-    padding: 0 $s-6 0 0;
+    padding: 0 $s-6;
     border-radius: $br-5;
     svg {
       @include flexCenter;

frontend/src/app/main/ui/components/title_bar.scss

@@ -13,6 +13,7 @@
   height: $s-32;
   width: 100%;
   min-height: $s-32;
+  margin: $s-4 0;
   background-color: var(--title-background-color);
   .title,
   .title-only {
@@ -26,7 +27,7 @@
     color: var(--title-foreground-color);
   }
   .title-only {
-    margin-left: $s-8;
+    // margin-left: $s-8;
   }
 
   .toggle-btn {
@@ -34,16 +35,14 @@
     display: flex;
     align-items: center;
     flex-grow: 1;
-    gap: $s-4;
     padding: 0;
     color: var(--title-foreground-color);
     stroke: var(--title-foreground-color);
     .collased-icon {
       @include flexCenter;
       height: $s-24;
-      width: $s-24;
       border-radius: $br-8;
-      padding: 0 $s-4 0 $s-8;
+      padding-left: $s-8;
       svg {
         @extend .button-icon-small;
         transform: rotate(90deg);

frontend/src/app/main/ui/workspace/left_header.scss

@@ -10,7 +10,6 @@
   display: flex;
   align-items: center;
   height: $s-48;
-  max-width: var(--width, $s-256);
   padding: $s-8 $s-8 $s-4 $s-8;
   .main-icon {
     @include flexCenter;
@@ -33,11 +32,12 @@
       height: $s-16;
       width: 100%;
       padding-bottom: $s-2;
+      margin-top: -2px;
       color: var(--title-foreground-color);
       cursor: pointer;
     }
     .file-name {
-      @include titleTipography;
+      @include titleBigTipography;
       text-transform: none;
       color: var(--title-foreground-color-hover);
     }
@@ -47,9 +47,9 @@
       width: 100%;
       margin: 0;
       border: 0;
-      border-radius: $br-8;
+      border-radius: $br-4;
       background-color: var(--input-background-color);
-      font-size: $fs-12;
+      font-size: $fs-14;
       color: var(--input-foreground-color);
       z-index: 20;
       white-space: break-spaces;
@@ -82,7 +82,7 @@
     @extend .menu-dropdown;
     position: absolute;
     top: $s-48;
-    left: calc(var(--width, $s-256) - $s-32);
+    left: calc(var(--width, $s-256) - $s-16);
     margin: 0;
 
     .menu-item {
@@ -122,7 +122,7 @@
   .sub-menu {
     @extend .menu-dropdown;
     position: absolute;
-    left: calc(var(--width, $s-256) + $s-168);
+    left: calc(var(--width, $s-256) + $s-180);
     width: 270px;
     .shortcut {
       @extend .shortcut;

frontend/src/app/main/ui/workspace/left_toolbar.css.json

@@ -1 +1 @@
-{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}
+{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"}

frontend/src/app/main/ui/workspace/left_toolbar.scss

@@ -18,7 +18,7 @@
   border-radius: $s-8;
   z-index: $z-index-2;
   background-color: var(--color-background-primary);
-  transition: top 1s, height 1s, opacity 1s;
+  transition: top 0.3s, height 0.3s, opacity 0.3s;
 
   .main-toolbar-options {
     position: relative;
@@ -26,18 +26,19 @@
     align-items: center;
     margin: 0;
     opacity: $op-10;
-    transition: opacity 1s ease;
+    transition: opacity 0.3s ease;
     li {
       position: relative;
 
       button {
-        @extend .button-primary;
+        @extend .button-tertiary;
         height: $s-36;
         width: $s-36;
         flex-shrink: 0;
         background-color: transparent;
         border-radius: $s-8;
         border: none;
+        margin: 0 $s-2;
 
         svg {
           @extend .button-icon;

frontend/src/app/main/ui/workspace/libraries.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+
 .modal-overlay {
   @include flexCenter;
   position: fixed;
@@ -15,6 +16,7 @@
   z-index: $z-index-modal;
   background-color: var(--overlay-color);
   pointer-events: none; // This is to allow outside click that closes modal.
+
   .modal-dialog {
     position: relative;
     height: $s-520;
@@ -50,11 +52,13 @@
       .updates-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: $s-24;
+        gap: $s-32;
         padding-top: $s-24;
         height: 100%;
         max-height: $s-400;
         .section {
+          display: flex;
+          flex-direction: column;
           height: calc(100% - $s-12);
           :global(.title-spacing-lib) {
             margin: 0 0 $s-24 calc(-1 * $s-8);
@@ -63,8 +67,8 @@
           .section-list-shared {
             height: 100%;
             max-height: $s-320;
+            margin-top: $s-12;
             overflow: auto;
-            scrollbar-gutter: stable;
             .section-list-item {
               display: grid;
               grid-template-columns: 1fr auto;
@@ -128,7 +132,7 @@
             margin-bottom: $s-12;
           }
           .libraries-search {
-            margin-bottom: $s-12;
+            margin: $s-12 0;
             .search-icon {
               @include flexCenter;
               padding: 0 0 0 $s-8;

frontend/src/app/main/ui/workspace/palette.scss

@@ -30,7 +30,7 @@
   padding: $s-0 $s-0 $s-8 $s-8;
   border-radius: $br-8;
   background-color: var(--palette-background-color);
-  transition: right 1s, opacity 1s, width 1s;
+  transition: right 0.3s, opacity 0.2s, width 0.3s;
   &.wide {
     width: 100%;
   }

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

@@ -43,7 +43,7 @@ $width-settings-bar-max: $s-500;
   }
 }
 :global(.tab-spacing) {
-  margin: $s-4 $s-4 0 $s-4;
+  margin: $s-4 $s-8 0 $s-8;
 }
 .right-settings-bar {
   grid-area: right-sidebar;

frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss

@@ -26,7 +26,7 @@
       display: flex;
       align-items: center;
       height: $s-32;
-      padding: $s-8 $s-12 $s-8 $s-8;
+      padding: $s-8;
       margin-bottom: $s-4;
       border-radius: $br-8;
       background-color: var(--assets-item-background-color);
@@ -34,7 +34,8 @@
       .bullet-block {
         @include flexCenter;
         height: 100%;
-        width: $s-32;
+        justify-content: flex-start;
+        margin-right: $s-4;
       }
       .name-block {
         @include titleTipography;

frontend/src/app/main/ui/workspace/sidebar/assets/common.scss

@@ -15,7 +15,7 @@
     width: 100%;
     .section-icon {
       @include flexCenter;
-      padding-right: $s-8;
+      padding-right: $s-2;
       svg {
         @include flexCenter;
         height: $s-16;
@@ -27,6 +27,7 @@
     .section-name {
       display: flex;
       align-items: center;
+      margin: 0 $s-2;
     }
     .num-assets {
       @include flexCenter;

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -10,7 +10,7 @@
   .drop-space {
     height: $s-12;
     border-radius: $br-8;
-    background-color: var(--assets-item-background-color);
+    background-color: var(--color-foreground-secondary);
   }
   .asset-grid {
     display: grid;
@@ -24,7 +24,7 @@
       padding: $s-8;
       border: $s-2 solid transparent;
       border-radius: $br-8;
-      background-color: var(--assets-item-background-color);
+      background-color: var(--color-foreground-secondary);
       overflow: hidden;
       cursor: pointer;
       img {
@@ -126,11 +126,12 @@
       svg,
       img {
         @include flexCenter;
+        flex-shrink: 0;
         padding: $s-2;
         height: $s-32;
         width: $s-32;
         border-radius: $br-6;
-        background-color: var(--assets-item-background-color);
+        background-color: var(--color-foreground-secondary);
       }
 
       .item-name {

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs

@@ -58,8 +58,7 @@
                       :collapsed?   (not open?)
                       :on-collapsed  toggle-open
                       :title        (if local?
-                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")
+                                      (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
-                                                [:span {:class (dom/classnames (css :special-subtitle) true)} file-name]])
 
                                       (mf/html [:div {:class (dom/classnames (css :special-title) true)} file-name]))}
         (when-not local?

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json

@@ -1 +1 @@
-{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","special-subtitle":"assets_file_library_special-subtitle_9xOl9","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}
+{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"}

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss

@@ -20,14 +20,11 @@
 
   .special-title {
     @include textEllipsis;
-    width: calc(var(--width, 256px) - $s-80);
     color: var(--title-foreground-color-hover);
+    margin-left: $s-2;
+    text-align: left;
   }
-  .special-subtitle {
+
-    padding-left: $s-4;
-    color: var(--title-foreground-color);
-    text-transform: initial;
-  }
   .file-link {
     @extend .button-tertiary;
     height: $s-32;

frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss

@@ -10,7 +10,7 @@
   .drop-space {
     height: $s-12;
     border-radius: $br-8;
-    background-color: var(--assets-item-background-color);
+    background-color: var(--color-foreground-secondary);
   }
   .asset-grid {
     display: grid;
@@ -24,7 +24,7 @@
       border: $s-2 solid transparent;
       border-radius: $br-8;
       aspect-ratio: 1/1;
-      background-color: var(--assets-item-background-color);
+      background-color: var(--color-foreground-secondary);
       overflow: hidden;
       cursor: pointer;
       img {

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

@@ -19,6 +19,7 @@
     height: $s-32;
     width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
     padding-right: $s-12;
+    cursor: pointer;
 
     &.filtered {
       width: calc(100% - $s-12);

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

@@ -21,6 +21,7 @@
     margin-top: $s-2;
     margin-bottom: $s-4;
     padding-right: $s-8;
+    margin-left: $s-8;
     .page-name {
       @include tabTitleTipography;
       padding: 0 $s-12;
@@ -238,7 +239,7 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    scrollbar-gutter: stable;
+    // scrollbar-gutter: stable;
     overflow-y: overlay;
     .element-list {
       width: 100%;

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

@@ -105,7 +105,6 @@
     height: 90%;
     padding: $s-12;
     margin-bottom: $s-12;
-    scrollbar-gutter: stable;
     overflow-y: overlay;
     font-size: $fs-12;
     color: var(--title-foreground-color);

frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json

@@ -1 +1 @@
-{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"}
+{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","title-bar":"sidebar_sitemap_title-bar_tIJtT","title":"sidebar_sitemap_title_HmFc4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"}

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

@@ -14,10 +14,17 @@
   width: 100%;
   height: var(--height, 200px);
 
+  .title-bar {
+    .title {
+      margin-left: $s-2;
+    }
+  }
+
   .add-page {
     @extend .button-tertiary;
     height: $s-32;
     width: calc($s-24 + $s-4);
+    margin-right: $s-8;
     padding: 0;
     border-radius: $br-8;
     svg {
@@ -52,7 +59,7 @@
     flex-direction: column;
     overflow-y: auto;
     overflow-x: hidden;
-    scrollbar-gutter: stable;
+    // scrollbar-gutter: stable;
     overflow-y: overlay;
     height: 100%;
     width: 100%;