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/TaskDetailModal.css

@@ -188,7 +188,7 @@
   color: var(--text-dim);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .detail-provenance {
     align-items: flex-start;
   }
@@ -830,7 +830,7 @@
   font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .detail-move-btn__arrow {
     padding: var(--space-xs);
   }
@@ -1284,7 +1284,7 @@
 }
 
 /* Mobile responsive for changed-files modal */
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .changed-files-modal .changed-files-layout {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
@@ -1674,7 +1674,7 @@
   box-shadow: var(--shadow-sm);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .detail-tab {
     min-height: 36px;
   }
@@ -1881,7 +1881,7 @@
   transition: outline-color var(--transition-slow);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .detail-in-review-stall-meta {
     flex-direction: column;
     align-items: flex-start;
@@ -1927,7 +1927,7 @@
   gap: var(--space-sm);
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 480px) {
   .rebind-banner-actions {
     flex-direction: column;
     align-items: flex-start;