visualViewport + Scrollable Onboarding Deployed

Details

Raw Data

{
  "id": "3c65e64e-3e97-4891-bab9-074d8d9f1323",
  "type": "general",
  "status": "completed",
  "title": "visualViewport + Scrollable Onboarding Deployed",
  "description": "Implemented keyboard-aware viewport and scrollable onboarding card",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,sans-serif;\">\n<h2 style=\"color:#f0c14b;margin:0 0 16px 0;\">✅ visualViewport + Scrollable Onboarding</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;\">Fix 1: visualViewport Handler</h3>\n<p style=\"color:#9ca3af;margin:0 0 8px 0;\">Added JavaScript handler that dynamically resizes the console when keyboard opens/closes:</p>\n<pre style=\"background:#3d3d3d;padding:12px;border-radius:4px;font-size:0.75em;overflow-x:auto;color:#98c379;line-height:1.5;\">window.visualViewport.addEventListener('resize', () => {\n  const vh = visualViewport.height;\n  const navHeight = nav.offsetHeight;\n  consoleSection.style.height = (vh - navHeight) + 'px';\n});</pre>\n<p style=\"color:#7f848e;margin:8px 0 0 0;font-size:0.85em;\">This fires immediately when the keyboard opens, shrinking the console to fit above the keyboard.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;\">Fix 2: Scrollable Onboarding</h3>\n<p style=\"color:#9ca3af;margin:0 0 8px 0;\">Changed onboarding card from flex-fill to scrollable:</p>\n<ul style=\"margin:8px 0 0 0;padding-left:20px;color:#9ca3af;line-height:1.6;\">\n<li>Removed <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">flex:1</code> (was making logo header greedy)</li>\n<li>Added <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">overflow-y:auto</code> (scrollable if content exceeds height)</li>\n<li>Logo header now has <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">clamp(16px, 3vw, 24px)</code> padding (responsive but bounded)</li>\n<li>Logo max-width: <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">min(320px, 70vw)</code> (reasonable on all screens)</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">Files Modified</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;font-family:monospace;font-size:0.85em;\">\n<li><span style=\"color:#61afef;\">konui/src/dashboard-console.ts</span> – visualViewport handler</li>\n<li><span style=\"color:#61afef;\">konui/src/session-briefing.ts</span> – scrollable onboarding</li>\n<li><span style=\"color:#61afef;\">konui/src/views/layout.ts</span> – CSS cleanup, use --console-height var</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">Expected Behavior</h3>\n<table style=\"width:100%;font-size:0.85em;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #444;\"><th style=\"text-align:left;padding:6px 0;color:#9ca3af;\">Scenario</th><th style=\"text-align:left;padding:6px 0;color:#9ca3af;\">Result</th></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:6px 0;\">Keyboard opens</td><td style=\"color:#98c379;\">Console shrinks, input stays above keyboard</td></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:6px 0;\">Keyboard closes</td><td style=\"color:#98c379;\">Console expands back to full height</td></tr>\n<tr style=\"border-bottom:1px solid #444;\"><td style=\"padding:6px 0;\">Inner screen (wide)</td><td style=\"color:#98c379;\">Onboarding scrollable, all content accessible</td></tr>\n<tr><td style=\"padding:6px 0;\">Cover screen (narrow)</td><td style=\"color:#98c379;\">Onboarding scrollable, logo sized appropriately</td></tr>\n</table>\n</div>\n\n<div style=\"background:rgba(76,175,80,0.15);border:1px solid #4caf50;padding:12px 16px;border-radius:6px;\">\n<span style=\"color:#4caf50;font-weight:600;\">🚀 Live</span>\n<span style=\"color:#9ca3af;\"> – Test on Z Fold cover + inner screens with keyboard</span>\n</div>\n</div>",
    "requestedAt": "2026-01-04T14:00:00Z",
    "requestId": "fc7a6064-ee14-42d2-9ce8-b016130fd520",
    "choices": [
      {
        "label": "Test now",
        "value": "I'll test on my devices and report back",
        "primary": true
      },
      {
        "label": "Commit changes",
        "value": "Commit these mobile fixes to git"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-04T09:22:42.473Z",
  "updatedAt": "2026-01-04T09:22:42.647Z",
  "requestId": "fc7a6064-ee14-42d2-9ce8-b016130fd520",
  "scope": "vibetools",
  "tags": [
    "ui",
    "mobile",
    "responsive",
    "keyboard"
  ],
  "targetUser": "claude"
}