Dynamic height of placeholders in the wizard

Author: kuzmadom

src/ui/units/wizard/components/DND/DNDContainer.tsx

@@ -139,7 +139,7 @@ class DNDContainer extends Component<DNDContainerProps, DNDContainerState> {
                     ></div>
                 }
                 {items.map((item, index) => {
-                    const itemClassName = item.disabled ? b('item', {short: true}) : '';
+                    const itemClassName = b('item', item.disabled ? {short: true} : {});
                     return (
                         <div className={itemClassName} key={`${item.id}-${index}`}>
                             <DNDItem

src/ui/units/wizard/containers/App.scss

@@ -14,7 +14,6 @@
     }
 
     .dnd-container {
-        min-height: 53px;
         padding-top: 8px;
 
         .item-icon {

src/ui/units/wizard/containers/Wizard/SectionVisualization/SectionVisualization.scss

@@ -82,10 +82,9 @@
 
     .subcontainer {
         border-bottom: 1px solid var(--g-color-line-generic);
-        min-height: 90px;
 
         .subheader {
-            margin-bottom: 11px;
+            margin-bottom: var(--g-spacing-2);
             display: flex;
             align-items: center;
             color: var(--g-color-text-complementary);
@@ -128,15 +127,18 @@
         .dnd-container {
             margin: 2px;
             border-radius: 4px;
-            padding: 13px 17px var(--g-spacing-3);
-            min-height: 90px;
+            padding: var(--g-spacing-3) var(--g-spacing-3) var(--g-spacing-1);
             border: solid 1px transparent;
 
             .item-icon {
                 display: inline-block;
                 margin-right: 8px;
             }
 
+            &__item:last-child {
+                margin-bottom: var(--g-spacing-2);
+            }
+
             &__item_short {
                 align-items: center;
                 display: flex;
@@ -156,6 +158,7 @@
                 position: relative;
                 margin: 0 0 -2px;
                 display: none;
+                margin-bottom: var(--g-spacing-3);
             }
 
             &_cannot-drop {