Merge pull request #1246 from doradocodes/1228-2.0

fix: adjust landscape hero images to fill header on mobile (#1222)

Author: doradocodes

src/components/PageHeader/HomePage.astro

@@ -41,7 +41,7 @@ const { config } = Astro.props;
       im.linkTarget ?
       <a href={im.linkTarget} class={`max-lg:flex-1 max-lg:min-h-0 hero-image-container ${i > 0 ? "hidden" : ""}`}>
       <Image
-          containerClass={"relative"}
+          containerClass={"relative h-full"}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}
@@ -80,4 +80,4 @@ const { config } = Astro.props;
       }
     }
   });
-</script>
+</script>

styles/global.scss

@@ -207,7 +207,6 @@ code {
   background-color: var(--bg-gray-80);
   border-radius: 20px;
   padding: 0 var(--spacing-xxs);
-
   .dark-theme &:not(.code-box) {
     color: var(--type-black);
   }
@@ -231,18 +230,16 @@ section,
   h2,
   .text-h2 {
     margin-top: var(--gutter-md);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: 0px;
   }
 
   h2,
   .text-h2,
   h3,
   text-h3 {
-
     &,
-    &>* {
+    & > * {
       scroll-margin-top: var(--gutter-md);
-
       @media (min-width: $breakpoint-tablet) {
         scroll-margin-top: var(--gutter-sm);
       }
@@ -272,7 +269,6 @@ section,
   overflow-x: auto;
 
   border-radius: 20px;
-
   @media (max-width: $breakpoint-tablet) {
     border-radius: 10px;
   }
@@ -477,15 +473,11 @@ th {
   border-bottom-width: 1px;
   border-top-width: 1px;
 
-  // Fix #1061: On mobile/tablet (< 1024px) the outer wrapper is a flex column
-  // and the image container is flex-1. height: 100% fills the remaining header
-  // space exactly — no overflow into the h1 below, no gap on tall devices.
   @media (max-width: #{$breakpoint-laptop - 1px}) {
     height: 100%;
     max-height: none;
     min-height: 180px;
   }
-
   @media (min-width: $breakpoint-tablet) {
     left: calc(-1 * var(--spacing-lg));
     width: calc(100% + var(--spacing-lg) * 2);
@@ -499,7 +491,6 @@ hr.full-bleed {
   left: -2.5rem;
   width: calc(100% + 5rem);
   max-width: calc(100% + 5rem);
-
   @media (min-width: $breakpoint-tablet) {
     left: calc(-1 * var(--spacing-lg));
     width: calc(100% + var(--spacing-lg) * 2);
@@ -519,13 +510,10 @@ input[type="search"]::-webkit-search-results-decoration {
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
-
 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scrollbar {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 /** SPECIAL ELEMENTS **/