diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index b670914bc..a972587ff 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -511,13 +511,14 @@ [:span {:class (stl/css :icon)} i/corner-radius] [:& editable-select {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") - :on-token-remove on-border-radius-token-unapply :class (stl/css :token-select) - :type "number" - :min 0 :input-class (stl/css :numeric-input) + :position :right + :min 0 :on-change on-radius-1-change + :on-token-remove on-border-radius-token-unapply :options border-radius-options + :type "number" :value (:rx values)}]] @radius-multi? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 810c79f37..10bbf5056 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -109,6 +109,7 @@ .size { @include flexRow; + position: relative; } .height, @@ -182,6 +183,7 @@ .radius-1 { @extend .input-element; width: $s-108; + position: relative; } .radius-4 { diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs index afbd5a2ee..b36cadce7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs @@ -38,11 +38,13 @@ :else new-value)] (set-value! new-value))))) -(mf/defc dropdown-select [{:keys [on-close element-id element-ref options on-select]}] +(mf/defc dropdown-select [{:keys [position on-close element-id element-ref options on-select]}] [:& dropdown {:show true :on-close on-close} - [:div {:class (stl/css :custom-select-dropdown) - :ref element-ref} + [:> :div {:class (stl/css-case :custom-select-dropdown true + :custom-select-dropdown-right (= position :right) + :custom-select-dropdown-left (= position :left)) + :ref element-ref} [:ul {:class (stl/css :custom-select-dropdown-list)} (for [[index item] (d/enumerate options)] (cond @@ -60,7 +62,7 @@ [:span {:class (stl/css :check-icon)} i/tick]])))]]]) (mf/defc editable-select - [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove] :as params}] + [{:keys [value type options class on-change placeholder on-blur input-class on-token-remove position] :as params}] (let [state* (mf/use-state {:id (uuid/next) :is-open? false :current-value value @@ -239,7 +241,8 @@ i/arrow]) (when (and is-open? (seq options)) - [:& dropdown-select {:on-close close-dropdown + [:& dropdown-select {:position position + :on-close close-dropdown :element-id element-id :element-ref select-wrapper-ref :options options diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss index 7bb4e7f4e..3f0eb03f9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss @@ -9,7 +9,6 @@ .editable-select { @extend .asset-element; margin: 0; - position: relative; display: flex; height: calc($s-32 - 2px); // Fixes border being clipped by the input field width: 100%; @@ -62,13 +61,21 @@ width: 0; } + .custom-select-dropdown-left { + left: 0; + right: unset; + } + + .custom-select-dropdown-right { + right: 0; + left: unset; + } + .custom-select-dropdown { @extend .dropdown-wrapper; max-height: $s-320; width: auto; margin-top: $s-4; - right: 0; - left: unset; .separator { margin: 0;