fix(shs-5572): arrows on a Spotlight (with no image) displaying incor…

…rectly on mobile (#1503)

Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js

@@ -55,6 +55,12 @@ const restrictHeight = () => {
     textBoxes.forEach(
       (textBox) => isSpotlightTextBox(textBox) && setMinHeight(textBox, maxBoxHeight),
     );
+
+    // Find images inside each slider.
+    const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper');
+    if (slide.classList.contains('paragraph--type--hs-sptlght-slder') && !imageWrapper) {
+      slide.classList.add('paragraph--type--hs-sptlght-slder--no-image');
+    }
   });
 };
 

docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.spotlight.scss

@@ -92,8 +92,14 @@
               @include hb-pairing-color('border-color', 'secondary-darken-12');
 
               &:hover {
-                @include hb-pairing-color('background-color', 'secondary-darken-12');
-                @include hb-pairing-color('border-color', 'secondary-darken-12');
+                @include hb-pairing-color(
+                  'background-color',
+                  'secondary-darken-12'
+                );
+                @include hb-pairing-color(
+                  'border-color',
+                  'secondary-darken-12'
+                );
                 @include hb-global-color('color', 'white');
               }
             }
@@ -149,3 +155,40 @@
     }
   }
 }
+
+.paragraph--type--hs-sptlght-slder.paragraph--type--hs-sptlght-slder--no-image {
+  @media only screen and (max-width: 767px) {
+    .hb-spotlight {
+      height: 100%;
+    }
+
+    .slick-track {
+      bottom: 0;
+      height: 100%;
+    }
+
+    .slick__slide > div:first-child {
+      height: 100%;
+    }
+
+    .slick-prev {
+      @include hb-traditional {
+        bottom: 15% !important;
+      }
+
+      @include hb-themes(('colorful', 'airy')) {
+        bottom: 25% !important;
+      }
+    }
+
+    .slick-next {
+      @include hb-traditional {
+        bottom: 55% !important;
+      }
+
+      @include hb-themes(('colorful', 'airy')) {
+        bottom: 55% !important;
+      }
+    }
+  }
+}