Fix Header overflow on mobile (Grey Box issue)

Author: Rahulchaudharyji2

src/components/PageHeader/RootPage.astro

@@ -6,13 +6,13 @@ const { title, subtitle } = Astro.props;
 // to the header only when the filter by keyword is not present.
 const routesWithFilter = ["/reference"];
 const isFilterRoute = routesWithFilter.some((route) =>
-  Astro.url.pathname.includes(route)
+  Astro.url.pathname.includes(route),
 );
 const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
 ---
 
 <div
-  class=`content-grid-simple min-h-[350px] h-[50vh] pt-[11.25rem] lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
+  class=`content-grid-simple min-h-[350px] min-h-[50vh] h-auto pt-[11.25rem] lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
 >
   <h1 class="whitespace-pre-line col-span-full mb-5">{title}</h1>
   <p class="text-h3 !mt-0 mb-3xl col-span-2">{subtitle}</p>