diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index e3e2e874c..121efb9d7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -27,6 +27,10 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
+
+(def ^:private detach-icon
+  (i/icon-xref :detach-refactor (stl/css :detach-icon)))
+
 (defn opacity->string
   [opacity]
   (if (= opacity :multiple)
@@ -189,14 +193,14 @@
                    :dnd-over-top (= (:over dprops) :top)
                    :dnd-over-bot (= (:over dprops) :bot))
            :ref dref}
-     [:span {:class (stl/css :color-info)}
-      [:span {:class (stl/css-case :color-name-wrapper true
-                                   :no-opacity (or disable-opacity
-                                                   (not opacity?))
-                                   :library-name-wrapper library-color?
-                                   :editing editing-text?
-                                   :gradient-name-wrapper gradient-color?)}
-       [:span {:class (stl/css :color-bullet-wrapper)}
+     [:div {:class (stl/css :color-info)}
+      [:div {:class (stl/css-case :color-name-wrapper true
+                                  :no-opacity (or disable-opacity
+                                                  (not opacity?))
+                                  :library-name-wrapper library-color?
+                                  :editing editing-text?
+                                  :gradient-name-wrapper gradient-color?)}
+       [:div {:class (stl/css :color-bullet-wrapper)}
         [:& cbn/color-bullet {:color (cond-> color
                                        (nil? color-name) (assoc
                                                           :id nil
@@ -218,7 +222,7 @@
               :on-pointer-enter #(reset! hover-detach true)
               :on-pointer-leave #(reset! hover-detach false)
               :on-click detach-value}
-             i/detach-refactor])]
+             detach-icon])]
 
               ;; Rendering a gradient
          gradient-color?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index ed7f7bc3a..f02cf1aeb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -10,14 +10,16 @@
   @include flexRow;
 
   &.dnd-over-top {
-    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
+    border-block-start: $s-1 solid var(--layer-row-foreground-color-drag);
   }
   &.dnd-over-bot {
-    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
+    border-block-end: $s-1 solid var(--layer-row-foreground-color-drag);
   }
 }
 
 .color-info {
+  --detach-icon-foreground-color: none;
+
   display: flex;
   align-items: center;
   gap: $s-2;
@@ -26,147 +28,153 @@
   height: $s-32;
   width: 100%;
   flex-grow: 1;
+  min-width: 0;
 
-  .color-name-wrapper {
-    @extend .input-element;
-    flex-grow: 1;
-    width: 100%;
-    border-radius: $br-8 0 0 $br-8;
-    padding: 0;
-    margin-right: 0;
-    gap: $s-4;
-    input {
-      padding: 0;
-    }
-    .color-bullet-wrapper {
-      height: $s-28;
-      padding: 0 $s-2 0 $s-8;
-      border-radius: $br-8 0 0 $br-8;
+  &:hover {
+    --detach-icon-foreground-color: var(--input-foreground-color-active);
+
+    .detach-btn,
+    .select-btn {
       background-color: transparent;
-      &:hover {
-        background-color: transparent;
-      }
     }
-    .color-name {
-      @include titleTipography;
-      @include textEllipsis;
-      padding-inline: $s-6;
+  }
+}
+
+.color-name-wrapper {
+  @extend .input-element;
+  flex-grow: 1;
+  width: 100%;
+  border-radius: $br-8 0 0 $br-8;
+  padding: 0;
+  margin-inline-end: 0;
+  gap: $s-4;
+  input {
+    padding: 0;
+  }
+  .color-bullet-wrapper {
+    height: $s-28;
+    padding: 0 $s-2 0 $s-8;
+    border-radius: $br-8 0 0 $br-8;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+  .color-name {
+    @include titleTipography;
+    @include textEllipsis;
+    padding-inline: $s-6;
+    border-radius: $br-8;
+    color: var(--input-foreground-color-active);
+  }
+  .detach-btn {
+    @extend .button-tertiary;
+    height: $s-28;
+    width: $s-28;
+    margin-inline-start: auto;
+    border-radius: 0 $br-8 $br-8 0;
+    display: none;
+  }
+  .detach-icon {
+    @extend .button-icon;
+    stroke: var(--detach-icon-foreground-color);
+  }
+  .color-input-wrapper {
+    @include titleTipography;
+    display: flex;
+    align-items: center;
+    height: $s-28;
+    padding: 0 $s-0;
+    width: 100%;
+    margin: 0;
+    flex-grow: 1;
+    background-color: var(--input-background-color);
+    color: var(--input-foreground-color);
+    border-radius: $br-0;
+  }
+  &.no-opacity {
+    border-radius: $br-8;
+    .color-input-wrapper {
       border-radius: $br-8;
-      color: var(--input-foreground-color-active);
+    }
+  }
+  &:hover {
+    --detach-icon-foreground-color: var(--input-foreground-color-active);
+
+    background-color: var(--input-background-color-hover);
+    border: $s-1 solid var(--input-border-color-hover);
+    .color-bullet-wrapper,
+    .color-name,
+    .detach-btn,
+    .color-input-wrapper {
+      background-color: var(--input-background-color-hover);
     }
     .detach-btn {
-      @extend .button-tertiary;
-      height: $s-28;
-      width: $s-28;
-      border-radius: 0 $br-8 $br-8 0;
-      display: none;
-      svg {
-        @extend .button-icon;
-      }
-    }
-    .color-input-wrapper {
-      @include titleTipography;
       display: flex;
-      align-items: center;
-      height: $s-28;
-      padding: 0 $s-0;
-      width: 100%;
-      margin: 0;
-      flex-grow: 1;
-      background-color: var(--input-background-color);
-      color: var(--input-foreground-color);
-      border-radius: $br-0;
     }
-    &.no-opacity {
-      border-radius: $br-8;
-      .color-input-wrapper {
-        border-radius: $br-8;
-      }
-    }
-    &:hover {
-      background-color: var(--input-background-color-hover);
-      border: $s-1 solid var(--input-border-color-hover);
+    &.editing {
+      background-color: var(--input-background-color-active);
       .color-bullet-wrapper,
       .color-name,
       .detach-btn,
       .color-input-wrapper {
-        background-color: var(--input-background-color-hover);
-      }
-      .detach-btn {
-        display: flex;
-        svg {
-          stroke: var(--input-foreground-color-active);
-        }
-      }
-      &.editing {
         background-color: var(--input-background-color-active);
-        .color-bullet-wrapper,
-        .color-name,
-        .detach-btn,
-        .color-input-wrapper {
-          background-color: var(--input-background-color-active);
-        }
-      }
-      &:focus,
-      &:focus-within {
-        background-color: var(--input-background-color-focus);
-        border: $s-1 solid var(--input-border-color-focus);
       }
     }
-
     &:focus,
     &:focus-within {
       background-color: var(--input-background-color-focus);
       border: $s-1 solid var(--input-border-color-focus);
-      &:hover {
-        background-color: var(--input-background-color-hover);
-        border: $s-1 solid var(--input-border-color-focus);
-      }
-    }
-
-    &.editing {
-      background-color: var(--input-background-color-active);
-      &:hover {
-        border: $s-1 solid var(--input-border-color-active);
-      }
-    }
-  }
-  .gradient-name-wrapper {
-    border-radius: 0 $br-8 $br-8 0;
-    .color-name {
-      @include flexRow;
-      border-radius: 0 $br-8 $br-8 0;
-    }
-  }
-  .library-name-wrapper {
-    border-radius: $br-8;
-  }
-  .opacity-element-wrapper {
-    @extend .input-element;
-    width: $s-60;
-    border-radius: 0 $br-8 $br-8 0;
-    .opacity-input {
-      padding: 0;
-      border-radius: 0 $br-8 $br-8 0;
-      min-width: $s-28;
-    }
-    .icon-text {
-      @include flexCenter;
-      height: $s-32;
-      margin-right: $s-4;
-      padding-top: $s-2;
     }
   }
 
-  &:hover {
-    .detach-btn,
-    .select-btn {
-      background-color: transparent;
-      svg {
-        stroke: var(--input-foreground-color-active);
-      }
+  &:focus,
+  &:focus-within {
+    background-color: var(--input-background-color-focus);
+    border: $s-1 solid var(--input-border-color-focus);
+    &:hover {
+      background-color: var(--input-background-color-hover);
+      border: $s-1 solid var(--input-border-color-focus);
     }
   }
+
+  &.editing {
+    background-color: var(--input-background-color-active);
+    &:hover {
+      border: $s-1 solid var(--input-border-color-active);
+    }
+  }
+}
+
+.gradient-name-wrapper {
+  border-radius: 0 $br-8 $br-8 0;
+  .color-name {
+    @include flexRow;
+    border-radius: 0 $br-8 $br-8 0;
+  }
+}
+
+.library-name-wrapper {
+  border-radius: $br-8;
+}
+
+.opacity-element-wrapper {
+  @extend .input-element;
+  width: $s-60;
+  border-radius: 0 $br-8 $br-8 0;
+  .opacity-input {
+    padding: 0;
+    border-radius: 0 $br-8 $br-8 0;
+    min-width: $s-28;
+  }
+  .icon-text {
+    @include flexCenter;
+    height: $s-32;
+    margin-inline-end: $s-4;
+    margin-block-start: $s-2;
+  }
 }
 
 .remove-btn,