diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index fcc536563c..c903c96f3d 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -152,6 +152,7 @@ $s-648: #{0.25 * 162}rem; $s-664: #{0.25 * 166}rem; $s-688: #{0.25 * 172}rem; $s-712: #{0.25 * 178}rem; +$s-720: #{0.25 * 180}rem; $s-736: #{0.25 * 184}rem; $s-744: #{0.25 * 186}rem; $s-800: #{0.25 * 200}rem; diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index e6cb23f38b..7682e22c39 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -301,7 +301,7 @@ [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)} (tr "workspace.token.edit-theme-title")] - [:form {:on-submit on-save-form} + [:form {:on-submit on-save-form :class (stl/css :edit-theme-form)} [:div {:class (stl/css :edit-theme-wrapper)} [:button {:on-click on-back :class (stl/css :back-btn) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss index 0b6058a23f..0bb41b365f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss @@ -12,10 +12,12 @@ .modal-dialog { @extend .modal-container-base; - display: grid; - grid-template-rows: auto 1fr auto; + + display: flex; + flex-direction: column; width: 100%; - max-width: $s-468; + max-width: $s-512; + max-height: $s-720; user-select: none; } @@ -32,6 +34,12 @@ display: flex; flex-direction: column; gap: $s-24; + overflow: auto; +} + +.edit-theme-form { + display: flex; + overflow-y: auto; } .themes-modal-title { @@ -101,6 +109,8 @@ .theme-group-label { color: var(--color-foreground-secondary); + margin: 0 0 $s-12 0; + padding: 0; } .group-title { @@ -114,12 +124,14 @@ display: flex; flex-direction: column; gap: $s-6; + margin: 0; } .theme-group-wrapper { display: flex; flex-direction: column; - gap: $s-8; + overflow-y: auto; + gap: $s-32; } .theme-row { @@ -166,7 +178,7 @@ .sets-list-wrapper { border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); border-radius: $s-8; - overflow: hidden; + overflow-y: auto; } .sets-count-empty-button {