fix(ui): fix iPhone Safari chat layout and input zoom by macdao · Pull Request #63644 · openclaw/openclaw

macdao · 2026-04-09T08:45:01Z

Summary

Problem: On Safari iPhone, the chat view showed a global scrollbar, the body didn't fill the full viewport, and tapping an input field triggered an unwanted auto-zoom.
Why it matters: These are visible layout regressions on iOS that make the chat UI feel broken on mobile Safari.
What changed: Set html/body to 100dvh with overflow: hidden; use 100dvh on openclaw-app for dynamic viewport awareness; remove redundant min-height from .shell--chat; add maximum-scale=1 to the viewport meta tag.
What did NOT change: No logic, routing, or non-UI surfaces were touched.

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Closes #
Related #
This PR fixes a bug or regression

Root Cause (if applicable)

Root cause: body height was set to 100% (relative, not viewport-anchored), causing overflow on mobile. min-height: 100vh on .shell--chat conflicted with height: 100vh and allowed scroll. Safari auto-zooms inputs when the viewport maximum-scale is unset.
Missing detection / guardrail: No mobile Safari layout test coverage.
Contributing context (if known):

Regression Test Plan (if applicable)

N/A — pure CSS/HTML layout fix; no logic paths to unit test.

Coverage level that should have caught this: End-to-end / visual
Unit test
Seam / integration test
End-to-end test
Existing coverage already sufficient
Target test or file: N/A
Scenario the test should lock in: Chat view fills full viewport on iPhone Safari without scroll or zoom on input focus.
Why this is the smallest reliable guardrail: Requires a real or simulated mobile Safari viewport.
Existing test that already covers this (if any): None
If no new test is added, why not: CSS layout regressions on mobile Safari require manual or visual regression testing; no automated harness exists for this surface today.

User-visible / Behavior Change

Chat view on iPhone Safari no longer shows a spurious scrollbar, fills the full viewport correctly, and no longer zooms in when tapping an input field.

Diagram (if applicable)

Before

After

Security Impact (required)

New permissions/capabilities? No
Secrets/tokens handling changed? No
New/changed network calls? No
Command/tool execution surface changed? No
Data access scope changed? No

Repro + Verification

Environment

OS: iOS (Safari iPhone)
Runtime/container: Browser (Safari WebKit)
Model/provider: N/A
Integration/channel (if any): Control UI
Relevant config (redacted): N/A

Steps

Open the control UI on iPhone Safari.
Navigate to the chat view.
Observe the layout and tap an input field.

Expected

No scrollbar on the chat view.
Body fills the full viewport.
Input focus does not trigger zoom.

Actual (before fix)

Global scrollbar visible.
Body height not anchored to viewport.
Safari zooms in on input focus.

Evidence

Failing test/log before + passing after
Trace/log snippets
Screenshot/recording
Perf numbers (if relevant)

Human Verification (required)

Verified scenarios: Chat view layout on iPhone Safari — no scrollbar, full viewport height, no input zoom.
Edge cases checked: Keyboard appearance (viewport shrink with dvh), landscape orientation.
What you did not verify: Android Chrome, desktop browsers (no changes expected there).

Review Conversations

I replied to or resolved every bot review conversation I addressed in this PR.
I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

Backward compatible? Yes
Config/env changes? No
Migration needed? No

Risks and Mitigation

None

greptile-apps · 2026-04-09T08:46:42Z

Greptile Summary

This PR fixes three Safari iPhone layout regressions in the control UI chat view: a global scrollbar caused by height: 100% on html/body not being viewport-anchored, a height conflict from min-height: 100vh on .shell--chat coexisting with height: 100vh, and Safari's auto-zoom on input focus. The CSS changes (100dvh, overflow: hidden, removing the redundant min-height) are correct; the single P2 note is on maximum-scale=1, which works but also blocks user-initiated pinch-to-zoom (see inline comment for a font-size: 16px alternative).

Confidence Score: 5/5

Safe to merge — all remaining findings are P2 style suggestions that do not block correct behavior.

The three CSS/HTML changes directly and correctly address the stated layout regressions. The only open comment (maximum-scale=1 vs font-size approach) is a best-practice accessibility suggestion, not a correctness issue, and does not warrant blocking the merge.

No files require special attention.

Vulnerabilities

No security concerns identified. Changes are limited to CSS layout properties and a viewport meta attribute.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: ui/index.html
Line: 5

Comment:
**`maximum-scale=1` blocks user-initiated pinch-to-zoom**

`maximum-scale=1` prevents Safari's auto-zoom on input focus, but it also prevents users from pinch-zooming the entire page — a known accessibility concern (WCAG SC 1.4.4). A targeted fix is to ensure all `<input>`, `<textarea>`, and `<select>` elements in the control UI use `font-size: 16px` or larger; Safari only auto-zooms when the focused element's computed `font-size` is below 16px.

```suggestion
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

If setting `font-size: 16px` on inputs is the preferred fix, add to `base.css`:

```css
input, textarea, select {
  font-size: max(16px, 1em);
}
```

This lets users still pinch-to-zoom while eliminating the auto-zoom on input focus.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "UI: disable auto-zoom on input focus for..." | Re-trigger Greptile}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e23133c4ed

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

This reverts commit e23133c.

…m on focus

macdao · 2026-04-15T04:03:13Z

accept advice - set textarea font-size 16px on Apple mobile to prevent auto-zoom on focus
resolved all comments

clawsweeper · 2026-04-29T04:21:48Z

Codex review: needs real behavior proof before merge. Reviewed June 5, 2026, 1:00 AM ET / 05:00 UTC.

Summary
Review failed before ClawSweeper could summarize the requested change.

PR surface: Source +8. Total +8 across 3 files.

Reproducibility: unclear. The review failed before ClawSweeper could establish a reproduction path.

Review metrics: none identified.

Merge readiness
Overall: 🌊 off-meta tidepool
Proof: 🌊 off-meta tidepool
Patch quality: 🌊 off-meta tidepool
Result: rating does not apply to this item.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Risk before merge

[P1] No close action taken because the review did not complete.

Maintainer options:

Decide the mitigation before merge
Retry the Codex review after fixing the execution failure.
Pause or close
Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

[P1] Review did not complete, so no work-lane recommendation was made.

Review details

Best possible solution:

Retry the Codex review after fixing the execution failure.

Do we have a high-confidence way to reproduce the issue?

Unclear. The review failed before ClawSweeper could establish a reproduction path.

Is this the best way to solve the issue?

Unclear. Retry the review first so ClawSweeper can evaluate the actual issue and fix direction.

AGENTS.md: unclear because the file could not be read completely.

Codex review notes: model gpt-5.5, reasoning high; reviewed against e0018382eb00.

Label changes

Label changes:

remove P2: Current review triage priority is none.
remove merge-risk: 🚨 compatibility: Current PR review selected no merge-risk labels.

Label justifications:

rating: 🌊 off-meta tidepool: Overall readiness is 🌊 off-meta tidepool; proof is 🌊 off-meta tidepool and patch quality is 🌊 off-meta tidepool.

Evidence reviewed

PR surface:

Source +8. Total +8 across 3 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	3	10	2	+8
Tests	0	0	0	0
Docs	0	0	0	0
Config	0	0	0	0
Generated	0	0	0	0
Other	0	0	0	0
Total	3	10	2	+8

What I checked:

failure reason: codex execution failed.
codex failure detail: Codex review failed for this PR with exit 1.
codex stdout: Per-item Codex failure; continuing with the rest of the shard.

Likely related people:

unknown: Codex failed before it could trace repository history. (role: review did not complete; confidence: low)

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

clawsweeper · 2026-05-20T16:35:28Z

ClawSweeper PR egg

🎁 Pass real behavior proof to wake the egg and unlock a hatchable treat.

Where did the egg go?

The egg game starts only after the PR passes the real-behavior proof check.
Before that, no creature or rarity is rolled. The treat waits for real proof.
This is still just collectible flavor: proof affects review readiness, not creature quality.

openclaw-barnacle · 2026-06-04T04:58:12Z

This pull request has been automatically marked as stale due to inactivity.
Please add updates or it will be closed.

openclaw-clownfish · 2026-06-14T03:27:20Z

Clownfish 🐠 reef update

Thanks for the useful work here. Clownfish could not update this branch directly, so the replacement PR is the writable swim lane for the same fix path.

Replacement PR: #92855
Source PR: #63644
This source PR stays open so maintainers and the original contributor can compare the paths.
Credit follows the fix over to the replacement PR. no sneaky treasure grab.

fish notes: model gpt-5.5, reasoning xhigh; reviewed against 62f0150.

Repairs #63644. Review proof: local structured autoreview on branch review/pr-92855 against origin/main exited clean with no accepted/actionable findings. Co-authored-by: Xi Qi <1311124+macdao@users.noreply.github.com>

vincentkoc · 2026-06-14T03:36:55Z

Thanks for the original iOS Safari fix. I landed a refreshed replacement with your contributor credit preserved because this source branch was conflicted and needed maintainer repair.

Landed replacement: #92855
Merge commit: 889bc52

vincentkoc · 2026-06-14T03:36:57Z

Closing as superseded by landed replacement #92855.

Repairs openclaw#63644. Review proof: local structured autoreview on branch review/pr-92855 against origin/main exited clean with no accepted/actionable findings. Co-authored-by: Xi Qi <1311124+macdao@users.noreply.github.com>

macdao added 3 commits April 9, 2026 14:04

UI: fix global scrollbar on iPhone chat view

432b1e0

ui: set body to full viewport height with overflow hidden

bcb31e2

UI: disable auto-zoom on input focus for Safari iPhone

e23133c

openclaw-barnacle Bot added app: web-ui App: web-ui size: XS labels Apr 9, 2026

greptile-apps Bot reviewed Apr 9, 2026

View reviewed changes

Comment thread ui/index.html Outdated

chatgpt-codex-connector Bot reviewed Apr 9, 2026

View reviewed changes

Comment thread ui/index.html Outdated

macdao added 2 commits April 10, 2026 17:22

Revert "UI: disable auto-zoom on input focus for Safari iPhone"

019c1ad

This reverts commit e23133c.

chat: set textarea font-size 16px on Apple mobile to prevent auto-zoo…

d7b5a57

…m on focus

This was referenced Apr 29, 2026

fix(ui): set input font-size to 16px to prevent iOS Safari auto-zoom on focus #64673

Closed

Control UI on iOS auto-zooms when focusing chat/input fields #64651

Closed

This was referenced May 10, 2026

Control UI not responsive on iPhone — content overflows viewport #79995

Closed

Webchat composer + mobile controls clipped in iOS 26.x Safari standalone PWA mode (env(safe-area-inset-bottom) under-reports) #77408

Closed

BunsDev mentioned this pull request May 15, 2026

fix(ui): keep PWA chat controls above iOS home indicator #82034

Merged

openclaw-barnacle Bot added the triage: needs-real-behavior-proof Candidate: external PR needs after-fix proof from a real setup. label May 19, 2026

clawsweeper Bot added the proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. label May 20, 2026

openclaw-barnacle Bot added the stale Marked as stale due to inactivity label Jun 4, 2026

openclaw-barnacle Bot removed the stale Marked as stale due to inactivity label Jun 5, 2026

openclaw-clownfish Bot mentioned this pull request Jun 14, 2026

fix(ui): repair iOS Safari chat viewport handling #92855

Merged

vincentkoc closed this Jun 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): fix iPhone Safari chat layout and input zoom#63644

fix(ui): fix iPhone Safari chat layout and input zoom#63644
macdao wants to merge 5 commits into
openclaw:mainfrom
macdao:style/iphone-viewport-height

macdao commented Apr 9, 2026

Uh oh!

greptile-apps Bot commented Apr 9, 2026

Vulnerabilities

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

macdao commented Apr 15, 2026

Uh oh!

clawsweeper Bot commented Apr 29, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented May 20, 2026

Uh oh!

openclaw-barnacle Bot commented Jun 4, 2026

Uh oh!

openclaw-clownfish Bot commented Jun 14, 2026

Uh oh!

vincentkoc commented Jun 14, 2026

Uh oh!

vincentkoc commented Jun 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

macdao commented Apr 9, 2026

Summary

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Root Cause (if applicable)

Regression Test Plan (if applicable)

User-visible / Behavior Change

Diagram (if applicable)

Security Impact (required)

Repro + Verification

Environment

Steps

Expected

Actual (before fix)

Evidence

Human Verification (required)

Review Conversations

Compatibility / Migration

Risks and Mitigation

Uh oh!

greptile-apps Bot commented Apr 9, 2026

Greptile Summary

Confidence Score: 5/5

Vulnerabilities

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

macdao commented Apr 15, 2026

Uh oh!

clawsweeper Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

clawsweeper Bot commented May 20, 2026

Uh oh!

openclaw-barnacle Bot commented Jun 4, 2026

Uh oh!

openclaw-clownfish Bot commented Jun 14, 2026

Uh oh!

vincentkoc commented Jun 14, 2026

Uh oh!

vincentkoc commented Jun 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

clawsweeper Bot commented Apr 29, 2026 •

edited

Loading