svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki 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 { .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 { .nav-dropdown-menu a {
@@ -101,7 +103,9 @@
/* Mobile navigation dropdown */ /* Mobile navigation dropdown */
.mobile-nav { .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 { .mobile-nav a {