From f5af9e46e1fff5860f01728db0d318b65aa31b82 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Thu, 11 Jun 2026 11:17:43 +0700 Subject: [PATCH] fix(mobile-menu): make menu scrollable when content overflows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After adding the products dropdown (7 categories + 27 subcategory links), the mobile menu was taller than typical phone screens (~640px on iPhone SE). Without overflow handling, users on short screens could not reach the bottom items (ผลงาน, ติดต่อเรา). Added to mobile menu container: - max-h-[calc(100vh-4rem)]: cap height at viewport minus header - overflow-y-auto: enable internal scrollbar when content overflows - overscroll-contain: prevent scroll chain to background page (iOS Safari specific) Menu is now fully scrollable within its own container — page content underneath stays still while user scrolls through menu items. --- src/layouts/BaseLayout.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index a2f0ce8..778e848 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -418,7 +418,7 @@ const productLinks = [ -