Merge pull request #1215 from processing/1185-2

fix: prevent hero heading overlap on mobile and tablet viewports (#1061)

Author: ksen0

src/components/PageHeader/HomePage.astro

@@ -10,7 +10,7 @@ const { config } = Astro.props;
 
 ---
 
-<div class="px-lg pt-[11.25rem] lg:pt-3xl pb-0 h-full">
+<div class="max-lg:flex max-lg:flex-col px-lg pt-[11.25rem] lg:pt-3xl pb-0 h-full">
   <div class="homepage-header-top">
     <div class="grid grid-cols-3 lg:grid-cols-4 gap-md overflow-visible h-min">
       <p class="col-span-2 lg:col-span-3 mt-0 text-md md:text-xl lg:text-3xl">
@@ -39,7 +39,7 @@ const { config } = Astro.props;
   {
     config.data.heroImages.map((im, i) => (
       im.linkTarget ?
-      <a href={im.linkTarget} class={`hero-image-container ${i > 0 ? "hidden" : ""}`}>
+      <a href={im.linkTarget} class={`max-lg:flex-1 max-lg:min-h-0 hero-image-container ${i > 0 ? "hidden" : ""}`}>
       <Image
           containerClass={"relative"}
           class={"hero-image"}
@@ -51,7 +51,7 @@ const { config } = Astro.props;
       </a>
       :
       <Image
-          containerClass={`relative hero-image-container ${i > 0 ? "hidden" : ""}`}
+          containerClass={`max-lg:flex-1 max-lg:min-h-0 relative hero-image-container ${i > 0 ? "hidden" : ""}`}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}

styles/global.scss

@@ -207,6 +207,7 @@ code {
   background-color: var(--bg-gray-80);
   border-radius: 20px;
   padding: 0 var(--spacing-xxs);
+
   .dark-theme &:not(.code-box) {
     color: var(--type-black);
   }
@@ -237,9 +238,11 @@ section,
   .text-h2,
   h3,
   text-h3 {
+
     &,
-    & > * {
+    &>* {
       scroll-margin-top: var(--gutter-md);
+
       @media (min-width: $breakpoint-tablet) {
         scroll-margin-top: var(--gutter-sm);
       }
@@ -269,6 +272,7 @@ section,
   overflow-x: auto;
 
   border-radius: 20px;
+
   @media (max-width: $breakpoint-tablet) {
     border-radius: 10px;
   }
@@ -469,6 +473,16 @@ th {
   border-color: var(--type-color);
   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);
@@ -482,6 +496,7 @@ 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);
@@ -501,10 +516,13 @@ 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 **/
@@ -550,4 +568,4 @@ body {
 
 .dark-theme pre.mermaid svg {
   filter: invert(100%);
-}
+}