Style the form to fit the color ramp exactly

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"

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);

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;