fix: remove margin from Resizable-Card-Layout item (#2214)

* removed card margin, added z-index, corrected layout margin

* custom css for margin [ci visual]

* fix: variable used [ci visual]

.storybook/custom/custom.scss

@@ -600,34 +600,34 @@ body.sb-show-main {
   display: flex;
   flex-wrap: wrap;
 
+  @mixin set-card-dimensions($width: 20rem, $height: 20rem) {
+    width: $width;
+    height: $height;
+    margin: 0.5rem;
+  }
+
   .card-one-dimensions {
-    width: 40rem;
-    height: 16rem;
+    @include set-card-dimensions(40rem, 16rem);
   }
 
   .card-two-dimensions {
-    width: 20rem;
-    height: fit-content;
+    @include set-card-dimensions(20rem, fit-content);
   }
 
   .card-three-dimensions {
-    width: 20rem;
-    height: 20rem;
+    @include set-card-dimensions();
   }
 
   .card-four-dimensions {
-    width: 20rem;
-    height: 35rem;
+    @include set-card-dimensions(20rem, 35rem);
   }
 
   .card-five-dimensions {
-    width: 40rem;
-    height: 25rem;
+    @include set-card-dimensions(40rem, 25rem);
   }
 
   .card-six-dimensions {
-    width: 20rem;
-    height: 20rem;
+    @include set-card-dimensions();
   }
 }
 

src/resizable-card-layout.scss

@@ -9,25 +9,30 @@ $block: #{$fd-namespace}-resizable-card-layout;
   $fd-resize-handle-width: 0.0625rem;
   $fd-resize-icon-padding: 0.0625rem;
   $fd-border-on-drag: 0.125rem dashed var(--sapContent_DragAndDropActiveColor);
+  $fd-layout-top-margin: 1rem;
+  $fd-layout-default-margin: 0.5rem;
+  $fd-resize-handle-index: 2;
 
   // reduced by 0.5rem as card already have 0.5rem padding
   $fd-resizable-card-padding-x: (
-    sm: 0,
-    md: 0.5rem,
-    lg: 2.5rem,
+    sm: 0.5rem,
+    md: 1rem,
+    lg: 1rem,
+    xl: 3rem
   );
 
   @include fd-reset();
 
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: $fd-layout-default-margin;
+  padding-right: $fd-layout-default-margin;
+  margin-top: $fd-layout-top-margin;
+  position: relative;
 
   &__item {
     @include fd-reset();
     @include fd-flex();
 
     min-width: $fd-resizable-card-min-width;
-    margin: 0.5rem;
     position: relative;
   }
 
@@ -49,7 +54,7 @@ $block: #{$fd-namespace}-resizable-card-layout;
     position: absolute;
     bottom: 0;
     right: 0;
-    z-index: 2;
+    z-index: $fd-resize-handle-index;
     padding: 0 $fd-resize-icon-padding $fd-resize-icon-padding 0;
 
     @include fd-rtl() {
@@ -71,6 +76,7 @@ $block: #{$fd-namespace}-resizable-card-layout;
     bottom: 0;
     right: $fd-resize-icon-padding;
     color: var(--sapButton_IconColor);
+    z-index: $fd-resize-handle-index;
 
     @include fd-rtl() {
       transform: rotate(90deg);
@@ -100,6 +106,7 @@ $block: #{$fd-namespace}-resizable-card-layout;
   &__resize {
     &--vertical {
       order: 2;
+      z-index: $fd-resize-handle-index;
       // subtract resize-corner icon font-size/2
       width: $fd-resize-handle-width;
       cursor: ew-resize;
@@ -112,6 +119,7 @@ $block: #{$fd-namespace}-resizable-card-layout;
 
     &--horizontal {
       // subtract resize-corner icon font-size/2
+      z-index: $fd-resize-handle-index;
       width: calc(100% - 0.5rem);
       height: $fd-resize-handle-width;
       position: absolute;