Fix Android Chrome input cutoff - system nav bar

Details

Raw Data

{
  "id": "ccfc26d0-a475-4eaa-93c2-9af7b1aee0e4",
  "type": "general",
  "status": "completed",
  "title": "Fix Android Chrome input cutoff - system nav bar",
  "description": "Fixed mobile input textarea being cut off by Android system navigation bar",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\"><h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">🔧 Fix: Android Chrome Input Cutoff</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#f59e0b;margin:0 0 12px 0;\">Root Cause</h3><p style=\"color:#9ca3af;margin:0;\">The <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">100svh</code> and <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">100dvh</code> viewport units correctly account for browser chrome (address bar), but they do <strong style=\"color:#ef4444;\">NOT</strong> account for Android's system navigation bar (home/back/recent buttons) which is typically 48-56px tall.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#22c55e;margin:0 0 12px 0;\">Solution</h3><ul style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;\"><li><strong>JavaScript detection:</strong> Detect Android via user agent and subtract 56px from viewport height</li><li><strong>CSS fallback:</strong> Use <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">calc(100dvh - 56px)</code> for Android mobile</li><li><strong>iOS unchanged:</strong> Safari correctly handles <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">100svh</code></li><li><strong>Multiple lifecycle hooks:</strong> Run on DOMContentLoaded, load, resize, and interval for first 2s</li></ul></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#3b82f6;margin:0 0 12px 0;\">Files Changed</h3><pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;margin:0;overflow-x:auto;\"><span style=\"color:#98c379;\">konui/src/dashboard-console.ts</span> <span style=\"color:#7f848e;\">- Enhanced visualViewport handler</span>\n<span style=\"color:#98c379;\">konui/src/views/layout.ts</span>       <span style=\"color:#7f848e;\">- Added CSS fallback with calc()</span></pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#c678dd;margin:0 0 12px 0;\">Commit</h3><p style=\"font-family:monospace;color:#61afef;margin:0;\">ad4b8fee</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">Testing Required</h4><p style=\"color:#9ca3af;margin:0;\">Please test on your Samsung Galaxy Z Fold to verify:</p><ul style=\"margin:8px 0 0 0;padding-left:20px;color:#e0e0e0;\"><li>Input textarea is fully visible above Android nav bar</li><li>Status bar (CONNECTED | Clear | New) is visible</li><li>Keyboard open/close still works properly</li><li>Landscape and portrait modes</li></ul></div></div>",
    "requestedAt": "2026-01-08T00:02:00.000Z",
    "requestId": "9b05d1d1-a30f-4b08-b2f4-7f8ae7f55cfb",
    "commitSha": "ad4b8fee",
    "choices": [
      {
        "label": "Works! ✓",
        "value": "The Android input cutoff fix is working correctly - the input is now fully visible",
        "primary": true
      },
      {
        "label": "Still broken",
        "value": "The input is still cut off on Android Chrome - the fix didn't work"
      },
      {
        "label": "Partial fix",
        "value": "The fix partially works - describe what's still wrong"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-08T12:05:16.012Z",
  "updatedAt": "2026-01-08T12:05:16.431Z",
  "requestId": "9b05d1d1-a30f-4b08-b2f4-7f8ae7f55cfb",
  "scope": "vibetools",
  "tags": [
    "ui",
    "mobile",
    "android"
  ],
  "targetUser": "claude"
}