From 995235d6696b29ce86ce3e93c811a0947adb712e Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Wed, 29 Jan 2025 18:03:26 +0100
Subject: [PATCH] :lipstick: Fix tokens modal block size when colorpicker is
 displayed (#5713)

---
 .../app/main/ui/workspace/tokens/form.cljs    | 20 +++++++++++--------
 .../app/main/ui/workspace/tokens/modals.cljs  | 14 ++++++++++---
 .../app/main/ui/workspace/tokens/modals.scss  |  3 +++
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 4e308efc3..b6d2cb5b2 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -215,7 +215,7 @@
 
 (mf/defc form
   {::mf/wrap-props false}
-  [{:keys [token token-type action selected-token-set-name]}]
+  [{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
   (let [create? (not (instance? ctob/Token token))
         token (or token {:type token-type})
         token-properties (wtty/get-token-properties token)
@@ -290,7 +290,8 @@
 
         ;; Value
         color (mf/use-state (when color? (:value token)))
-        color-ramp-open? (mf/use-state false)
+        color-ramp-open* (mf/use-state false)
+        color-ramp-open? (deref color-ramp-open*)
         value-input-ref (mf/use-ref nil)
         value-ref (mf/use-var (:value token))
         token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
@@ -323,10 +324,13 @@
                              (dom/set-value! (mf/ref-val value-input-ref) color-value)
                              (on-update-value-debounced color-value))))
 
-        on-display-colorpicker (mf/use-fn
-                                (mf/deps color-ramp-open?)
-                                (fn []
-                                  (swap! color-ramp-open? not)))
+        on-display-colorpicker'
+        (mf/use-fn
+         (mf/deps color-ramp-open? on-display-colorpicker)
+         (fn []
+           (let [open? (not color-ramp-open?)]
+             (reset! color-ramp-open* open?)
+             (on-display-colorpicker open?))))
 
         value-error? (seq (:errors token-resolve-result))
         valid-value-field? (and
@@ -464,8 +468,8 @@
          :on-blur on-update-value}
         (when color?
           [:> input-token-color-bullet*
-           {:color @color :on-click on-display-colorpicker}])]
-       (when @color-ramp-open?
+           {:color @color :on-click on-display-colorpicker'}])]
+       (when color-ramp-open?
          [:> ramp* {:color (some-> (or token-resolve-result (:value token))
                                    (tinycolor/valid-color))
                     :on-change on-update-color}])
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
index 1f12664c8..2f23ea933 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals.cljs
@@ -44,10 +44,17 @@
   {::mf/wrap-props false}
   [{:keys [x y position token token-type action selected-token-set-name] :as _args}]
   (let [wrapper-style (use-viewport-position-style x y position)
+        modal-size-large* (mf/use-state false)
+        modal-size-large? (deref modal-size-large*)
         close-modal (mf/use-fn
                      (fn []
-                       (modal/hide!)))]
-    [:div {:class (stl/css :token-modal-wrapper)
+                       (modal/hide!)))
+        update-modal-size (mf/use-fn
+                           (fn [visible]
+                             (reset! modal-size-large* visible)))]
+    [:div {:class (stl/css-case
+                   :token-modal-wrapper true
+                   :token-modal-large modal-size-large?)
            :style wrapper-style
            :data-testid "token-update-create-modal"}
      [:> icon-button* {:on-click close-modal
@@ -58,7 +65,8 @@
      [:& form {:token token
                :action action
                :selected-token-set-name selected-token-set-name
-               :token-type token-type}]]))
+               :token-type token-type
+               :on-display-colorpicker update-modal-size}]]))
 
 ;; Modals ----------------------------------------------------------------------
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/modals.scss b/frontend/src/app/main/ui/workspace/tokens/modals.scss
index b1e924616..770a503a4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/modals.scss
@@ -15,6 +15,9 @@
   z-index: 11;
   overflow-y: auto;
   overflow-x: hidden;
+  &.token-modal-large {
+    min-block-size: 38rem;
+  }
 }
 
 .close-btn {