From 71c314152cb56a96d9b60148d7c22e44a38d6cc8 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Thu, 5 Feb 2026 14:47:18 +0100 Subject: [PATCH] fix: make mobile nav and desktop dropdown scrollable Adds max-height (100vh minus header) and overflow-y auto to prevent menu items from being cut off on small screens. Co-Authored-By: Claude Opus 4.5 --- css/tailwind.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/tailwind.css b/css/tailwind.css index 546d26b..7d0ccb6 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -83,7 +83,9 @@ } .nav-dropdown-menu { - @apply absolute top-full left-0 mt-1 py-2 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg min-w-[160px] z-50; + @apply absolute top-full left-0 mt-1 py-2 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg min-w-[160px] z-50 overflow-y-auto; + max-height: calc(100vh - 5rem); + max-height: calc(100dvh - 5rem); } .nav-dropdown-menu a { @@ -101,7 +103,9 @@ /* Mobile navigation dropdown */ .mobile-nav { - @apply md:hidden border-t border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900; + @apply md:hidden border-t border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 overflow-y-auto; + max-height: calc(100vh - 4rem); + max-height: calc(100dvh - 4rem); } .mobile-nav a {