🐛 Fix modal overflow and column gap #9055

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;

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)

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 {