[Bug]: Weird UI Layout on iPhone 12 Pro

[openhands-agent]

Describe the bug and reproduction steps
The OpenHands UI displays incorrectly on an iPhone 12 Pro. The layout appears distorted with unexplained behavior.

Potential solutions
<N/A>

Logs, Errors, Screenshots, and Additional Context

Issue Created By: Xingyao Wang on Slack
Link to Slack Thread: Thread Link

[openhands-ai[bot]]

I'm on it! xingyaoww can track my progress at all-hands.dev

[openhands-ai[bot]]

I've successfully fixed issue #8980 which reported UI layout issues on iPhone 12 Pro. Here's a summary of my work:

Problem Identified

The OpenHands UI was displaying incorrectly on iPhone 12 Pro with a distorted layout. After examining the code, I found two main issues:

1. The root layout component had a fixed minimum width constraint (md:min-w-[1024px]) that was causing layout problems on mobile devices
2. The viewport meta tag needed optimization for mobile devices

Changes Made

1. Removed the fixed minimum width constraint from the root layout component in frontend/src/routes/root-layout.tsx
2. Updated the viewport meta tag in frontend/index.html to better handle mobile devices by adding maximum-scale=1, user-scalable=no, viewport-fit=cover parameters

Testing

I attempted to create a test for the responsive layout, but encountered some configuration issues with the test environment. However, the core fixes were implemented successfully.

Pull Request

I created a pull request that addresses the issue:

• PR: https://github.com/All-Hands-AI/OpenHands/pull/8981
• The PR includes a detailed description of the changes
• The PR mentions that it fixes issue #8980
• All changes have been pushed to the remote branch fix-iphone-layout-issue-8980

These changes should resolve the UI layout issues on iPhone 12 Pro while maintaining the existing layout on desktop devices.

[ItsUjjwalGoel]

@amanape @mamoodi i want to work on this . please assign me this . i will fix the ui for iphone 12 users and make the overall website responsive. #ieeesoc

[amanape]

Thanks for taking this on @ItsUjjwalGoel. Feel free to open a PR once you have the solution in place

[ItsUjjwalGoel]

@amanape working on it

[ItsUjjwalGoel]

@amanape I have a fixed navbar. Could you please elaborate on what specifically needs to be fixed? preview :-

(previously )

(now)

(for phone users)

[ItsUjjwalGoel]

@amanape please reply

[mamoodi]

Hi @ItsUjjwalGoel. amanape is away until next week. Hopefully he can reply then. In the meantime, looks like @xingyaoww opened this issue. Maybe he can help if you have questions on what needs to be fixed.

[ItsUjjwalGoel]

@xingyaoww please help... @mamoodi thanks

[xingyaoww]

Thanks @ItsUjjwalGoel for the fix -- did you see any issue when you were trying to start new conversations on the iPhone 12 Pro screen?

Also, feel free to start a PR for your mobile UI fix for the nav menu 🙌

[ItsUjjwalGoel]

@xingyaoww i will create pr tomorrow then. it will count in ieeesoc points right?

[ItsUjjwalGoel]

@xingyaoww @amanape please tell if it will be counted in ieeesoc or not

[amanape]

We are not affiliated with IEEE SoC so I cannot say. You'll have to ask the IEEE SoC organizers

[ItsUjjwalGoel]

@amanape no problem i will create pr tomorrow for sure .

[ItsUjjwalGoel]

@amanape @xingyaoww @mamoodi i have created pr .

[ItsUjjwalGoel]

only these changes were done, to make it right ...

[ItsUjjwalGoel]

@xingyaoww @amanape @mamoodi @openhands-agent when my pr will get merged?

[mamoodi]

@ItsUjjwalGoel I'd ask you to please stop pinging everyone for every comment. We have a small team of maintainers, the folks try to review it when they get a chance.