From cc23dd433127082f6fc6d1fa56dcd458526de743 Mon Sep 17 00:00:00 2001
From: ablzh <123565843+ablzh@users.noreply.github.com>
Date: Mon, 4 May 2026 14:54:19 +0800
Subject: [PATCH 1/2] Fix mobile layout overlap on tutorials page

The full-width cards on the tutorials page were overflowing and overlapping subsequent sections on mobile devices. This occurred because a hardcoded `max-height: 500px` in `_docs.scss` was overriding the intended mobile behavior due to CSS load order.

This limits the 500px `max-height` constraint to viewports 768px and wider, allowing the cards to expand naturally on smaller screens.
---
 _sass/modules/_cards.scss | 2 +-
 _sass/modules/_docs.scss  | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/_sass/modules/_cards.scss b/_sass/modules/_cards.scss
index 7f016e561..ea78bd70b 100755
--- a/_sass/modules/_cards.scss
+++ b/_sass/modules/_cards.scss
@@ -44,7 +44,7 @@
       margin: 3px 15px; // Reduce side margins on mobile to prevent overflow
 
       .card {
-        max-height: auto !important;
+        max-height: none !important;
         width: 100%; // Ensure card doesn't exceed container
         box-sizing: border-box; // Include padding in width calculation
 
diff --git a/_sass/modules/_docs.scss b/_sass/modules/_docs.scss
index 15e1e8539..172d83823 100644
--- a/_sass/modules/_docs.scss
+++ b/_sass/modules/_docs.scss
@@ -65,7 +65,11 @@
   }
 
   .card__fullwidth .card {
-    max-height: 500px !important;
+    max-height: none !important;
+
+    @media (min-width: 768px) {
+      max-height: 500px !important;
+    }
   }
 
   // UL/LIs here are for cards, no bullets actually used.

From 65ec62bdafa1d299dadd941b8400510314d1f3f0 Mon Sep 17 00:00:00 2001
From: ablzh <123565843+ablzh@users.noreply.github.com>
Date: Mon, 4 May 2026 15:27:43 +0800
Subject: [PATCH 2/2] Fixing the gap between sections

Fix section spacing and remove obsolete padfix class on tutorials page

After resolving the layout overlap issue on mobile, an unnaturally large gap remained between the "Beginner" and "Advanced" tutorial sections. This was cause by two overlapping padding classes on the first section's container:

1. `padfix`: An obsolete CSS hack that forcefully added 80px of bottom padding on mobile. This class and its CSS definitions have been completely removed.
2. `common-padding--bottom-small`: Added a standard 60px/40px bottom padding which was unnecessary since the sections are stacked.

Removing both classes from the "Beginner" container allows the sections to flo with normal spacing while keeping their separate HTML containers intact.
---
 _pages/tutorial.html      |  2 +-
 _sass/modules/_cards.scss | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/_pages/tutorial.html b/_pages/tutorial.html
index 0acaaab5c..950b73159 100644
--- a/_pages/tutorial.html
+++ b/_pages/tutorial.html
@@ -19,7 +19,7 @@ <h1>Tutorials for<br />All Levels</h1>
   </div>
 </div>
 
-<div class="docs cards common-padding--bottom-small padfix">
+<div class="docs cards">
   <div class="container">
     <h2 class="thin">Beginner</h2>
 
diff --git a/_sass/modules/_cards.scss b/_sass/modules/_cards.scss
index ea78bd70b..b696a9729 100755
--- a/_sass/modules/_cards.scss
+++ b/_sass/modules/_cards.scss
@@ -325,16 +325,6 @@
     }
   }
 
-  &.padfix {
-    padding-bottom: 80px;
-  }
-
-  @media (min-width: 768px) {
-    &.padfix {
-      padding-bottom: 0;
-    }
-  }
-
   @media (min-width: 768px) {
     &__container {
       grid-template-columns: repeat(2, 1fr);