🐛 Fix settings dropdown (#9883)

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

@@ -10,6 +10,7 @@
 @use "ds/colors.scss" as *;
 @use "ds/mixins.scss" as *;
 @use "ds/z-index.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .custom-select {
   @include custom-scrollbar;
@@ -103,7 +104,6 @@
     block-size: $sz-12;
     inline-size: $sz-12;
     stroke-width: 1.33px;
-    visibility: hidden;
     stroke: var(--color-foreground-secondary);
     transform: rotate(90deg);
   }
@@ -136,10 +136,10 @@
   top: $sz-32;
   left: 0;
   inline-size: 100%;
-  max-block-size: var(--menu-max-height, #{px2rem(300)});
+  max-block-size: var(--menu-max-height, px2rem(300));
   padding: var(--sp-xxs);
   margin: 0;
-  margin-block-start: px2rem(1);
+  margin-block-start: 1px;
   border-radius: $br-8;
   z-index: var(--z-index-dropdown);
   overflow: hidden auto;
@@ -152,6 +152,12 @@
     block-size: $sz-12;
     border-block-start: $b-1 solid var(--color-background-primary);
   }
+
+  &[data-direction="up"] {
+    bottom: $sz-32;
+    top: auto;
+    max-block-size: var(--menu-max-height-up, px2rem(300));
+  }
 }
 
 .current-label-input {

frontend/src/app/main/ui/settings.scss

@@ -6,6 +6,7 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
+@use "ds/mixins.scss" as *;
 
 .dashboard {
   background-color: var(--app-background);
@@ -16,6 +17,8 @@
 }
 
 .dashboard-content {
+  @include custom-scrollbar;
+
   display: flex;
   flex-direction: column;
   position: relative;

frontend/src/app/main/ui/settings/options.scss

@@ -7,12 +7,15 @@
 @use "./profile" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/_borders.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .dashboard-settings {
   display: grid;
 }
 
 .form-container {
+  --menu-max-height-up: #{px2rem(180)};
+
   &:first-child {
     margin-block-end: var(--sp-xxxl);
   }

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

@@ -5,8 +5,11 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/mixins.scss" as *;
 
 .dashboard-sidebar {
+  @include custom-scrollbar;
+
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
   display: grid;