claude-code - 💡(How to fix) Fix Pin input box to bottom of viewport so long responses don't force constant scrolling [1 comments, 2 participants]

TL;DR

Pin the input box to a fixed position at the bottom of the viewport to prevent auto-scrolling issues when generating long streaming responses.

Guidance

• Implement a CSS fix to position the input box absolutely at the bottom of the viewport, allowing the content area to scroll independently.
• Verify that the input box remains stationary while the content area scrolls by testing with a long streaming response.
• Consider adding a buffer zone or padding between the input box and the scrolling content area to improve usability.
• Test the proposed solution with various response lengths and scrolling scenarios to ensure a smooth user experience.

Example

.input-box {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Note: This is a simplified example and may require additional styling to fit the specific application layout.

Notes

The proposed solution assumes a standard chat UI layout and may need adjustments for custom or complex layouts. Additionally, this fix may introduce new issues, such as overlapping content or accessibility concerns, which should be thoroughly tested and addressed.

Recommendation

Apply the proposed workaround by pinning the input box to a fixed position, as it directly addresses the reported issue and improves the user experience.