diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
index 8e347ea6d..60c94207b 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
@@ -47,5 +47,7 @@
 }
 
 .sliders-wrapper {
-  @include flexColumn;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
index 1fa07db8a..9a866dfc9 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
@@ -51,27 +51,27 @@
                   value (+ min-value (* unit-value (- max-value min-value)))]
               (on-change value))))]
 
-    [:div {:class (stl/css-case :opacity-wrapper (= type :opacity))}
-     [:div {:class (dm/str class (stl/css-case :vertical vertical?
-                                               :slider-selector true
-                                               :hue (= type :hue)
-                                               :opacity (= type :opacity)
-                                               :value (= type :value)))
-            :on-pointer-down handle-start-drag
-            :on-pointer-up handle-stop-drag
-            :on-lost-pointer-capture handle-stop-drag
-            :on-click calculate-pos
-            :on-pointer-move #(when @dragging? (calculate-pos %))}
-      (let [value-percent (* (/ (- value min-value)
-                                (- max-value min-value)) 100)
 
-            value-percent (if reverse?
-                            (mth/abs (- value-percent 100))
-                            value-percent)
-            value-percent-str (str value-percent "%")
+    [:div {:class (dm/str class (stl/css-case :vertical vertical?
+                                              :slider-selector true
+                                              :hue (= type :hue)
+                                              :opacity (= type :opacity)
+                                              :value (= type :value)))
+           :on-pointer-down handle-start-drag
+           :on-pointer-up handle-stop-drag
+           :on-lost-pointer-capture handle-stop-drag
+           :on-click calculate-pos
+           :on-pointer-move #(when @dragging? (calculate-pos %))}
+     (let [value-percent (* (/ (- value min-value)
+                               (- max-value min-value)) 100)
 
-            style-common #js {:pointerEvents "none"}
-            style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
-            style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
-        [:div {:class (stl/css :handler)
-               :style (if vertical? style-vertical style-horizontal)}])]]))
+           value-percent (if reverse?
+                           (mth/abs (- value-percent 100))
+                           value-percent)
+           value-percent-str (str value-percent "%")
+
+           style-common #js {:pointerEvents "none"}
+           style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
+           style-vertical   (obj/merge! #js {:bottom value-percent-str} style-common)]
+       [:div {:class (stl/css :handler)
+              :style (if vertical? style-vertical style-horizontal)}])]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
index 7de62cbef..e2eee8030 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
@@ -17,7 +17,7 @@
   position: relative;
   align-self: center;
   height: $s-24;
-  width: $s-200;
+  inline-size: 100%;
   border: $s-2 solid var(--colorpicker-details-color);
   border-radius: $br-6;
   background: linear-gradient(