ISTWCMS-5905 Add css to rcorrect background image option display in layout...

ISTWCMS-5905 Add css to rcorrect background image option display in layout builder section options flyout

src/patterns/03-layouts/layout/_layout.scss

@@ -54,7 +54,8 @@
       padding-bottom: var(--section-margin);
     }
     &.uw-section__background-color,
-    &.uw-section__background--full-width {
+    &.uw-section__background--full-width,
+    &.uw-section__background-image {
       padding-bottom: var(--base-section-margin);
       padding-top: var(--base-section-margin);
     }
@@ -66,7 +67,8 @@
       padding-bottom: var(--section-margin);
     }
     &.uw-section__background-color,
-    &.uw-section__background--full-width {
+    &.uw-section__background--full-width,
+    &.uw-section__background-image {
       padding-bottom: var(--section-margin);
       padding-top: var(--section-margin);
     }
@@ -85,7 +87,7 @@
   }
   &--bottom {
     position: relative;
-    &:not(.is-layout-builder-highlighted){
+    &:not(.is-layout-builder-highlighted) {
       border-color: var(--layout-border-color);
       border-style: var(--layout-border-style);
       border-bottom-width: var(--layout-border-width);
@@ -142,7 +144,7 @@
   &.uw-contained-width {
     @include uw-contained-width(var(--layout-max-width-narrow));
     &.uw-section__background-color,
-    &.uw-section__background--full-width{
+    &.uw-section__background--full-width {
       max-width: 100% !important;
       padding-left: calc((100% - var(--layout-max-width-narrow)) / 2);
       padding-right: calc((100% - var(--layout-max-width-narrow)) / 2);

src/patterns/03-layouts/media/_media.scss

@@ -33,3 +33,20 @@
     order: 1;
   }
 }
+
+// Adjust the image size in the layout builder off canvas flyout
+// when choosing background image in section options.
+.media-library-form-element .media-library-item__preview {
+  .uw-picture {
+    width: 100% !important;
+  }
+  .uw-picture__fallback {
+    width: 100% !important;
+  }
+}
+.media-library-selection .media-library-item--grid {
+  width: auto !important;
+}
+.media-library-item__name {
+  color: var(--uw-black);
+}