giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: make mobile nav and desktop dropdown scrollable

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-05 14:47:18 +01:00
parent e5d699cffc
commit 71c314152c
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/tailwind.css
View File

@@ -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 {