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>

packages/dashboard/app/components/ModelOnboardingModal.css

@@ -503,7 +503,7 @@
   line-height: 1.5;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .auth-provider-card--cli .auth-provider-info {
     flex-wrap: wrap;
   }
@@ -1169,7 +1169,7 @@
   background: var(--bg-hover);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .model-onboarding-modal {
     /* Reset the desktop min-width/min-height — they pin the modal at 640×480
        and force horizontal overflow on phones (≤414px). The fullscreen
@@ -1482,7 +1482,7 @@
   align-self: stretch;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .auth-device-code-panel {
     width: 100%;
   }