Turn: Fix mobile input cutoff - 100svh

Details

Raw Data

{
  "id": "3d1e598c-348d-4dd9-ac1c-1aa7a1629644",
  "type": "general",
  "status": "completed",
  "title": "Turn: Fix mobile input cutoff - 100svh",
  "description": "Replaced calc(100svh - 16px) with pure 100svh to properly handle mobile browser chrome",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,sans-serif;\">\n<h2 style=\"color:#22c55e;margin:0 0 16px 0;\">✓ Fix Implemented</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h4 style=\"margin:0 0 12px 0;color:#3b82f6;\">📝 Changes Made</h4>\n<p style=\"margin:0 0 12px 0;color:#9ca3af;\"><code style=\"background:#3b3b3b;padding:2px 6px;border-radius:3px;\">konui/src/views/layout.ts</code></p>\n<pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;overflow-x:auto;font-size:0.85em;margin:0;\">\n<span style=\"color:#ef4444;\">- height: calc(100dvh - 16px);</span>\n<span style=\"color:#ef4444;\">- height: calc(100svh - 16px);</span>\n<span style=\"color:#22c55e;\">+ height: 100svh;</span>\n</pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h4 style=\"margin:0 0 12px 0;color:#8b5cf6;\">💡 Why This Works</h4>\n<table style=\"width:100%;font-size:0.9em;\">\n<tr style=\"border-bottom:1px solid #3b3b3b;\">\n<td style=\"padding:8px 8px 8px 0;color:#56b6c2;width:80px;\">dvh</td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Dynamic viewport - changes as browser UI shows/hides</td>\n</tr>\n<tr style=\"border-bottom:1px solid #3b3b3b;\">\n<td style=\"padding:8px 8px 8px 0;color:#22c55e;\">svh</td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Small viewport - smallest safe area when ALL browser UI visible</td>\n</tr>\n<tr>\n<td style=\"padding:8px 8px 8px 0;color:#f59e0b;\">lvh</td>\n<td style=\"padding:8px 0;color:#9ca3af;\">Large viewport - when browser UI hidden (risky for fixed layouts)</td>\n</tr>\n</table>\n<p style=\"margin:12px 0 0 0;color:#9ca3af;line-height:1.6;\"><code>svh</code> automatically accounts for Android nav bar (~48px), iOS safe area, and address bar without manual calculation.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h4 style=\"margin:0 0 12px 0;color:#f59e0b;\">💾 Commit</h4>\n<p style=\"margin:0;font-family:monospace;\"><span style=\"color:#56b6c2;\">eb41104c</span> Turn: Fix mobile input cutoff - use pure 100svh</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">🧪 Test It</h4>\n<p style=\"color:#9ca3af;margin:0;\">Hard refresh the page on your Android device to test. The input area should now stay fully visible above the navigation bar.</p>\n</div>\n</div>",
    "choices": [
      {
        "label": "Restart konui",
        "value": "Restart konui service to apply the CSS changes",
        "primary": true
      },
      {
        "label": "View commit",
        "value": "Show the full commit diff"
      },
      {
        "label": "More fixes",
        "value": "Are there any other mobile layout issues to address?"
      }
    ],
    "requestedAt": "2026-01-08T11:12:00.000Z",
    "requestId": "a2648690-4652-436e-b217-673bf3297338",
    "commitSha": "eb41104c",
    "turnTiming": {
      "totalMs": 62843,
      "ttfeMs": 45,
      "thinkingMs": 62798,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-08T11:56:36.474Z",
  "updatedAt": "2026-01-08T11:57:03.446Z",
  "requestId": "a2648690-4652-436e-b217-673bf3297338",
  "scope": "vibetools",
  "tags": [
    "mobile",
    "ui",
    "bug-fix"
  ],
  "targetUser": "claude"
}