🐛 Fix scroll bar in design tab (#7582)

* 🐛 Fix scroll bar in design tab

* ♻️ Remove deprecated css tokens in options.scss

CHANGES.md

@@ -66,6 +66,7 @@
 - Fix exporting a board crashing the app [Taiga #12384](https://tree.taiga.io/project/penpot/issue/12384)
 - Fix nested variant in a component doesn't keep inherited overrides [Taiga #12299](https://tree.taiga.io/project/penpot/issue/12299)
 - Fix selected colors not showing colors from children shapes in multiple selection [Taiga #12384](https://tree.taiga.io/project/penpot/issue/12385)
+- Fix scrollbar issue in design tab [Taiga #12367](https://tree.taiga.io/project/penpot/issue/12367)
 
 ## 2.10.1
 

frontend/src/app/main/ui/ds/_sizes.scss

@@ -19,6 +19,7 @@ $sz-36: px2rem(36);
 $sz-40: px2rem(40);
 $sz-48: px2rem(48);
 $sz-88: px2rem(88);
+$sz-96: px2rem(96);
 $sz-120: px2rem(120);
 $sz-154: px2rem(154);
 $sz-160: px2rem(160);

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

@@ -5,7 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @use "ds/_sizes.scss" as *;
-@use "refactor/common-refactor.scss" as deprecated;
 
 .tool-window {
   position: relative;
@@ -15,26 +14,26 @@
 }
 
 .tab-spacing {
-  margin-right: deprecated.$s-12;
+  margin-inline-end: var(--sp-m);
 }
 
 .content-class {
   overflow-y: auto;
   overflow-x: hidden;
-  height: calc(100vh - deprecated.$s-96);
+  height: calc(100vh - #{$sz-96});
   scrollbar-gutter: stable;
 }
 
 .element-options {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
   width: 100%;
   /* FIXME: This is hacky and prone to break, we should tackle the whole layout
             of the sidebar differently */
-  --sidebar-element-options-height: calc(100vh - $sz-88);
+  --sidebar-element-options-height: calc(100vh - #{$sz-88});
   height: var(--sidebar-element-options-height);
-  padding-top: deprecated.$s-8;
+  padding-block-start: var(--sp-s);
 }
 
 .read-only {