🐛 Fix Components are not dragged from the group to the assets tab

CHANGES.md

@@ -15,6 +15,7 @@
 ### :bug: Bugs fixed
 
 - Fix pencil loader [Taiga #8348](https://tree.taiga.io/project/penpot/issue/8348)
+- Fix components are not dragged from the group to the assets tab [Taiga #8273](https://tree.taiga.io/project/penpot/issue/8273)
 
 ## 2.1.0 - Things can only get better!
 

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -241,14 +241,9 @@
 
      (when group-open?
        [:*
-        (when-let [components (not-empty (get groups "" []))]
+        (let [components (not-empty (get groups "" []))]
           [:div {:class-name (stl/css-case :asset-grid listing-thumbs?
-                                           :asset-enum (not listing-thumbs?)
+                                           :asset-enum (not listing-thumbs?))
-                                           :drop-space (and
-                                                        (empty? components)
-                                                        (some? groups)
-                                                        (not dragging?)
-                                                        local))
                  :on-drag-enter on-drag-enter
                  :on-drag-leave on-drag-leave
                  :on-drag-over dom/prevent-default
@@ -261,7 +256,8 @@
            (when (and (empty? components)
                       (some? groups)
                       local)
-             [:div {:class (stl/css :drop-space)}])
+             [:div {:class (stl/css-case :drop-space true
+                                         :drop-space-small (not dragging?))}])
 
            (for [component components]
              [:& components-item

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -10,6 +10,10 @@
   height: $s-12;
 }
 
+.drop-space-small {
+  height: $s-2;
+}
+
 .asset-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
@@ -43,6 +47,7 @@
     background-color: var(--assets-item-name-background-color);
     border: $s-1 solid transparent;
     color: var(--assets-item-name-foreground-color);
+
     input {
       @include textEllipsis;
       @include bodySmallTypography;
@@ -50,11 +55,13 @@
       height: auto;
       padding: 0;
     }
+
     span {
       display: flex;
       align-items: center;
       height: 100%;
     }
+
     &.editing {
       border-color: var(--input-border-color-focus);
       border-radius: $br-4;
@@ -72,6 +79,7 @@
 
   &.selected {
     border: $s-2 solid var(--assets-item-border-color);
+
     &::before {
       content: " ";
       position: absolute;
@@ -123,21 +131,27 @@
   &:not(:last-child) {
     margin-bottom: $s-4;
   }
+
   &:hover {
     background-color: var(--assets-item-background-color-hover);
+
     .item-name {
       color: var(--assets-item-name-foreground-color-hover);
+
       &.editing {
         background: var(--input-background-color);
+
         input {
           color: var(--input-foreground-color-active);
         }
+
         span svg {
           stroke: var(--input-foreground-color-active);
         }
       }
     }
   }
+
   &.selected {
     border: $s-1 solid var(--assets-item-border-color);
   }
@@ -148,6 +162,7 @@
   @include textEllipsis;
   order: 2;
   color: var(--assets-item-name-foreground-color);
+
   input {
     @include textEllipsis;
     @include bodySmallTypography;
@@ -155,6 +170,7 @@
     height: $s-32;
     padding: $s-4;
   }
+
   span {
     display: flex;
     place-items: center;
@@ -199,6 +215,7 @@
   width: $s-28;
   margin-left: $s-2;
   border-radius: $br-8;
+
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);