OpenQode/implementation_plan_responsive.md

Responsive Layout Hardening Plan

Goal

Fix "eaten/overlapped" text by enforcing strict horizontal boundaries and increasing safety margins for the TUI renderer.

User Review Required

Note

This change will slightly narrow the text area (by ~2 chars) to ensure borders never cut off content.

Proposed Changes

1. ViewportMessage Hardening

• File: bin/opencode-ink.mjs
• Change: Pass width - 6 to Markdown children (User/AI).
• Reason: Accounts for Border (2) + Padding (2) + Safe Margin (2).
• Style: Add overflow: 'hidden' to the bubble container.

2. ThinkingBlock Constraints

• File: bin/ui/components/ThinkingBlock.mjs
• Change: Ensure it accepts width prop and passes width - 4 to internal text.

3. ScrollableChat Verification

• File: bin/opencode-ink.mjs
• Action: Verify ScrollableChat container clips overflow correctly.

Verification Plan

1. Resize Test: Drag terminal window to different sizes.
2. Long Line Test: Genrate a long path (/a/very/long/path/...). Verify it wraps or truncates, doesn't explode layout.