fix(dashboard): keep mobile nav visible on Android landscape and during keyboard
- Broaden mobile media query to include (max-height: 480px) so landscape phones (which exceed 768 CSS px wide) still render the bottom nav and mobile board layout instead of desktop horizontally-scrollable columns. - Guard useMobileKeyboard against pinch-zoom (vv.scale > 1) — Android Chrome ignores user-scalable=no, and a focused textarea + zoom was false-positiving keyboard-open and hiding MobileNavBar. - Read documentElement.clientHeight instead of stale window.innerHeight when computing keyboard overlap (Android multi-window can leave innerHeight cached at a wildly different value than the actual layout viewport — observed 2848 while html was 797). - Add interactive-widget=resizes-content to the viewport meta so Android Chrome shrinks the layout viewport with the soft keyboard, matching iOS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -453,7 +453,7 @@
|
||||
}
|
||||
|
||||
/* Compact styles for mobile-project-switch (mobile + tablet) */
|
||||
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) {
|
||||
@media (max-width: 768px), (max-height: 480px), (min-width: 769px) and (max-width: 1024px) {
|
||||
.mobile-project-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -486,7 +486,7 @@
|
||||
padding-bottom: var(--executor-footer-height);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px), (max-height: 480px) {
|
||||
/* Hide project selector on mobile (belt-and-suspenders with conditional rendering) */
|
||||
.project-selector {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user