h2oai / h2oai/wave

Reset focus/zoom in mobile view on iPhone

Open
#2,169 0 comments 0 reactions 0 assignees View on GitHub
feature ui
Dominant language
Python
Stars
4.3k
Forks
371
Avg merge
26d 1h
Merged PRs (30d)
1

Description

#### Is your feature request related to a problem? Please describe

I came across a situation on an iPhone (not sure if it affects Android too) where after the user selects a text box to input information the viewport focuses on the text box and zooms in a bit. After leaving the field the same zoom is maintained. This causes dialogs which are rendered at the correct size for the original viewport size to appear clipped.

#### Describe the solution you'd like
The viewport should reset or the dialog should render proportional to the zoomed viewport.
(A clear and concise description of what you want to happen.)

#### Describe alternatives you've considered
I thought about setting a smaller size for the dialog but it would mean that the fixed size would be too small for desktop users.

Original render at correct size and dialog fits nicely
![image](https://github.com/h2oai/wave/assets/44904160/335db9f9-f91e-48e5-9d14-c1fe9dca819b)

On tap, the text box is centred and the the viewport zooms in
![image](https://github.com/h2oai/wave/assets/44904160/427eff77-cca5-4336-8094-dbc0146edab7)

When submitting the form any dialogs that are rendered appear clipped due to the screen retaining the zoom
![image](https://github.com/h2oai/wave/assets/44904160/77c9b43a-1520-4916-a184-a04663ad171e)

Contributor guide

Open the contributing guide

Research direction

No files, tests, or entry points are identified in the issue. Reproduce the iPhone text-field zoom and inspect the viewport and dialog behavior; done means dialogs remain fully visible after leaving a form field and submitting it.

Written by the indexing model from the issue text.

Assessment

Domain
frontend, mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.