From b6598d1f0714de5d16422cb435e9dae35a6eee5d Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Fri, 5 Dec 2025 09:55:41 +0100
Subject: [PATCH] :bug: Fix scrollbar on color modal (#7906)

---
 .../tokens/management/create/modals.cljs      | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
index 7a706976ed..861bbafcc9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
@@ -20,15 +20,21 @@
 
 ;; Component -------------------------------------------------------------------
 
-(defn calculate-position
+(defn- calculate-position
   "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y color?]
-  (let [;; picker height in pixels
-        ;; TODO: Revisit these harcoded values
-        h (if color? 610 510)
+  [{vh :height} position x y token-type]
+  (let [; TODO: Revisit these harcoded values
+        modal-height (case token-type
+                       :color
+                       500
+                       :typography
+                       660
+                       :shadow
+                       660
+                       400)
         ;; Checks for overflow outside the viewport height
-        max-y             (- vh h)
-        overflow-fix      (max 0 (+ y (- 50) h (- vh)))
+        max-y             (- vh modal-height)
+        overflow-fix      (max 0 (+ y (- 50) modal-height (- vh)))
         bottom-offset     "1rem"
         top-offset        (dm/str (- y 70) "px")
         max-height-top    (str "calc(100vh - " top-offset)
@@ -61,17 +67,19 @@
          :top (dm/str (- y 70 overflow-fix) "px")
          :maxHeight max-height-top}))))
 
-(defn use-viewport-position-style [x y position color?]
+(defn use-viewport-position-style [x y position token-type]
   (let [vport (-> (l/derived :vport refs/workspace-local)
                   (mf/deref))]
-    (-> (calculate-position vport position x y color?)
+    (-> (calculate-position vport position x y token-type)
         (clj->js))))
 
 (mf/defc token-update-create-modal
   {::mf/wrap-props false}
   [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
-  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
-        modal-size-large* (mf/use-state (= token-type :typography))
+  (let [wrapper-style (use-viewport-position-style x y position token-type)
+        modal-size-large* (mf/use-state (or (= token-type :typography)
+                                            (= token-type :color)
+                                            (= token-type :shadow)))
         modal-size-large? (deref modal-size-large*)
         close-modal (mf/use-fn
                      (fn []