🐛 Fix detach button position

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)
@@ -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?

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;
@@ -27,13 +29,23 @@
   width: 100%;
   flex-grow: 1;
 
-  .color-name-wrapper {
+  &:hover {
+    --detach-icon-foreground-color: var(--input-foreground-color-active);
+
+    .detach-btn,
+    .select-btn {
+      background-color: transparent;
+    }
+  }
+}
+
+.color-name-wrapper {
   @extend .input-element;
   flex-grow: 1;
   width: 100%;
   border-radius: $br-8 0 0 $br-8;
   padding: 0;
-    margin-right: 0;
+  margin-inline-end: 0;
   gap: $s-4;
   input {
     padding: 0;
@@ -58,11 +70,13 @@
     @extend .button-tertiary;
     height: $s-28;
     width: $s-28;
+    margin-inline-start: auto;
     border-radius: 0 $br-8 $br-8 0;
     display: none;
-      svg {
-        @extend .button-icon;
   }
+  .detach-icon {
+    @extend .button-icon;
+    stroke: var(--detach-icon-foreground-color);
   }
   .color-input-wrapper {
     @include titleTipography;
@@ -84,6 +98,8 @@
     }
   }
   &: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,
@@ -94,9 +110,6 @@
     }
     .detach-btn {
       display: flex;
-        svg {
-          stroke: var(--input-foreground-color-active);
-        }
     }
     &.editing {
       background-color: var(--input-background-color-active);
@@ -130,18 +143,21 @@
       border: $s-1 solid var(--input-border-color-active);
     }
   }
-  }
-  .gradient-name-wrapper {
+}
+
+.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 {
+}
+
+.library-name-wrapper {
   border-radius: $br-8;
-  }
-  .opacity-element-wrapper {
+}
+
+.opacity-element-wrapper {
   @extend .input-element;
   width: $s-60;
   border-radius: 0 $br-8 $br-8 0;
@@ -153,19 +169,8 @@
   .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);
-      }
-    }
+    margin-inline-end: $s-4;
+    margin-block-start: $s-2;
   }
 }