opencode icon indicating copy to clipboard operation
opencode copied to clipboard

Fix a few mobile screen size issues

Open carterworks opened this issue 5 days ago • 0 comments

  1. Reduce the width of <Home/> on smaller screen devices

old, broken. Notice how "add project" is off-screen

https://github.com/user-attachments/assets/e53684cc-470f-4f36-ab81-a20ae0dc20e6

new, with some scaling. everything fits in a mobile width

https://github.com/user-attachments/assets/29f84d06-6412-4d3f-9f30-90634329076d

  1. Fix bottom bar position on Safari iOS 26.

The height of the main app was set to 100vh (h-screen). This was causing it to get clipped by the navbar on iOS 26 Safari. I've changed it to h-dvh to be the height of the "dynamic" viewport, depending on the scroll position. Since the main window doesn't scroll, we could probably just do h-svh to do the "small" viewport and avoid the potential performance issue but that felt like premature optimization, since I didn't do any testing on other devices or profiling.

old, clipped bottom prompt bar

image

New, not clipped bottom prompt bar image

Photos taken on iPhone 17 Pro Max with iOS 26.3 and tabs set to "compact"

carterworks avatar Jan 04 '26 05:01 carterworks