also looking at this
fix(ui): bound the mobile menu to the visible viewport
#5
2 files
+24
-0
| @@ -110,6 +110,7 @@ a { color: inherit; text-decoration: none; } | ||
| 110 | 110 | .nav-menu-panel { |
| 111 | 111 | position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; |
| 112 | 112 | display: flex; flex-direction: column; gap: 0.25rem; min-width: 232px; padding: 0.6rem; |
| 113 | max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; | |
| 113 | 114 | background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); |
| 114 | 115 | box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); |
| 115 | 116 | } |
| @@ -304,6 +305,7 @@ a.cell:hover .cell-more { color: var(--accent); gap: 0.55rem; } | ||
| 304 | 305 | |
| 305 | 306 | /* responsive */ |
| 306 | 307 | @media (max-width: 900px) { |
| 308 | body:has(.nav-menu[open]) { overflow: hidden; } | |
| 307 | 309 | .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; } |
| 308 | 310 | .bento, .related, .cmp { grid-template-columns: 1fr; } |
| 309 | 311 | .metrics { grid-template-columns: 1fr 1fr; } |