fix(app): comprehensive mobile UX improvements #7989
Conversation
- Fix prompt dock height calculation by using offsetHeight instead of contentRect.height to include padding (pt-12, pb-4/pb-8) in the measurement - Add initial promptHeight estimate (160px) to prevent layout jumps before ResizeObserver fires - Simplify content padding calculations by removing redundant +32px/+64px offsets - Add onClick handler to mobile sidebar session links to auto-close drawer after navigation - Add overflow-x-hidden to prevent horizontal scroll issues - Add scroll retry logic to handle cases where content isn't ready on initial scroll
…fixes - Add touch event handlers to distinguish tap vs scroll in sidebar session list - Fix input field and toolbar padding for mobile viewports - Fix submit button icon size (16x16px with size=small) - Improve scroll-to-bottom retry logic with more attempts
- Add viewport-fit=cover and disable user scaling for mobile - Add CSS fixes for mobile overflow and safe area insets - Add visibility change handler to reconnect event stream when app resumes - Auto-open recently active projects on visibility change - Add mobileSendOnEnter setting for mobile keyboard handling
|
Thanks for your contribution! This PR doesn't have a linked issue. All PRs must reference an existing issue. Please:
See CONTRIBUTING.md for details. |
|
The following comment was made by an LLM, it may be inaccurate: Based on my search, I found one potentially related PR: Potential Related PR:
This PR appears related because it also addresses sidebar and responsive design improvements for smaller screens/mobile viewports. It may overlap with the sidebar scrolling and mobile layout optimizations in PR #7989. However, these seem to be addressing different aspects - PR #7988 focuses on accessibility and zoom, while PR #7989 is more comprehensive with touch gesture handling, viewport/CSS fixes, and connectivity improvements. You may want to review PR #7988 to ensure there's no duplicated work. |
|
This fixes #7990. |
|
Before and after screenshot might help. |
opencode-agent
bot
force-pushed
the
dev
branch
from
00637c0 to
71e0ba2
Compare
thdxr
force-pushed
the
dev
branch
3 times, most recently
from
f1ae801 to
08fa7f7
Compare
2 participants
What does this PR do?
This PR provides comprehensive mobile UX and layout improvements for the web application. Key enhancements include:
viewport-fit=coverand safe-area CSS support for notched devices. Disabled user-scaling and fixed overscroll behaviors to provide a more native app-like experience.mobileSendOnEntersetting to allow users to configure keyboard behavior on mobile devices.How did you verify your code works?
Manual Verification. Verified all layout adjustments and the sidebar auto-close behavior using the Vite development server.