From f5b62a5fc1b14556bc8c81b29a68ab430db0371b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 18 Sep 2024 17:23:42 +0200
Subject: [PATCH] Style the form to fit the color ramp exactly

---
 frontend/src/app/main/ui/workspace/tokens/form.cljs   | 3 ++-
 frontend/src/app/main/ui/workspace/tokens/form.scss   | 6 +++++-
 frontend/src/app/main/ui/workspace/tokens/modals.scss | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 079f5189f..b202c3ac8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -326,7 +326,8 @@ Token names should only contain letters and digits separated by . characters.")}
                                             (st/emit! (wtu/update-workspace-tokens))
                                             (modal/hide!)))))))))]
     [:form
-     {:on-submit on-submit}
+     {:class (stl/css :form-wrapper)
+      :on-submit on-submit}
      [:div {:class (stl/css :token-rows)}
       [:div
        [:& tokens.common/labeled-input {:label "Name"
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.scss b/frontend/src/app/main/ui/workspace/tokens/form.scss
index 423683779..4d1b37c86 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/form.scss
@@ -7,6 +7,10 @@
 @import "refactor/common-refactor.scss";
 @import "./common.scss";
 
+.form-wrapper {
+  width: $s-260;
+}
+
 .button-row {
   display: flex;
   flex-direction: column;
@@ -30,7 +34,7 @@
   @include bodySmallTypography;
   padding: $s-4 $s-6;
   font-weight: medium;
-  height: $s-24;
+  min-height: 1lh;
 
   color: var(--color-foreground-primary);
   border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals.scss b/frontend/src/app/main/ui/workspace/tokens/modals.scss
index c0e045448..cb16e1ec2 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals.scss
@@ -8,6 +8,9 @@
 
 .shadow {
   @extend .modal-container-base;
+  width: auto;
+  max-width: auto;
+  min-width: auto;
   @include menuShadow;
   position: absolute;
   z-index: 11;