diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index f0b1cab71c..f3a6c9df46 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index 91cbc781a5..b44800ac37 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/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; diff --git a/frontend/src/app/main/ui/settings/options.scss b/frontend/src/app/main/ui/settings/options.scss index 566b6270df..8a0b4129f1 100644 --- a/frontend/src/app/main/ui/settings/options.scss +++ b/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); } diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss index e9571a7ab4..6bdbc0740b 100644 --- a/frontend/src/app/main/ui/settings/sidebar.scss +++ b/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;