From 38426b829a5b343bd29512813e2da19453143ef0 Mon Sep 17 00:00:00 2001
From: Rahul Chaudhary <rahulchaudharyji2@gmail.com>
Date: Tue, 27 Jan 2026 14:37:47 +0530
Subject: [PATCH 1/2] Fix squashed layout on Tutorials page for mobile devices

---
 src/layouts/TutorialsLayout.astro | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/layouts/TutorialsLayout.astro b/src/layouts/TutorialsLayout.astro
index 8a44ec3e5f..a2d1a2bf2d 100644
--- a/src/layouts/TutorialsLayout.astro
+++ b/src/layouts/TutorialsLayout.astro
@@ -21,7 +21,7 @@ const sections = categories.map((slug) => {
     .filter((e: TutorialEntry) => e.data.category === slug)
     .sort(
       (a: TutorialEntry, b: TutorialEntry) =>
-        (a.data.categoryIndex ?? 1000) - (b.data.categoryIndex ?? 1000)
+        (a.data.categoryIndex ?? 1000) - (b.data.categoryIndex ?? 1000),
     );
 
   return { slug, name, sectionEntries };
@@ -55,7 +55,7 @@ setJumpToState({
         </h2>
         <ul class="content-grid border-b border-sidebar-type-color last:border-0">
           {sectionEntries.map((entry: TutorialEntry, i: number) => (
-            <li class="col-span-3">
+            <li class="col-span-6 md:col-span-3">
               <GridItemTutorial item={entry} lazyLoad={i > 3} />
             </li>
           ))}
@@ -66,7 +66,9 @@ setJumpToState({
 
   <section>
     <h2 class="mb-gutter-md mt-0">
-      {t("tutorialCategories", "education-resources")}<a id="education-resources"></a> <!-- ✅ changed from tutorialsPage -->
+      {t("tutorialCategories", "education-resources")}<a
+        id="education-resources"></a>
+      <!-- ✅ changed from tutorialsPage -->
     </h2>
     <p>{t("tutorialsPage", "education-resources-snippet")}</p>
     <LinkButton url="/education-resources" variant="link" class="mt-lg">

From 1e69b730452941cceef0429b41b0a226bda24942 Mon Sep 17 00:00:00 2001
From: Rahul Chaudhary <rahulchaudharyji2@gmail.com>
Date: Tue, 27 Jan 2026 14:46:25 +0530
Subject: [PATCH 2/2] Fix Header overflow on mobile (Grey Box issue)

---
 src/components/PageHeader/RootPage.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PageHeader/RootPage.astro b/src/components/PageHeader/RootPage.astro
index 16c61136e4..cd16866487 100644
--- a/src/components/PageHeader/RootPage.astro
+++ b/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>