fix(mobile): Prevent auto-zoom on input focus on iOS (#21) #23
Conversation
On iOS devices, the browser automatically zooms in on text inputs, which can disrupt the user experience by leaving the viewport zoomed in after an action is completed. This change resolves the issue by setting `maximum-scale=1` in the viewport configuration, preventing both automatic and manual scaling and ensuring the chat interface remains fully visible after sending a message. Fixes senbo1#21
|
@jameshaworthcs is attempting to deploy a commit to the Harsh's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA new export named Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant AppLayout
Browser->>AppLayout: Load layout.tsx
AppLayout-->>Browser: Export viewport config (maximumScale: 1)
Browser-->>Browser: Apply viewport restriction
Possibly related issues
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
app/layout.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.28.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/layout.tsx(2 hunks)
🔇 Additional comments (1)
app/layout.tsx (1)
1-1: Approve import addition
TheViewporttype is correctly imported as a type from 'next'.
| export const viewport: Viewport = { | ||
| maximumScale: 1, | ||
| }; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Accessibility and compatibility check for maximumScale
Disabling zoom via maximumScale: 1 might conflict with accessibility best practices (WCAG) and could impede users who rely on zoom. Moreover, confirm that your Next.js version supports the standalone export const viewport API—if not, you may need to include viewport settings within the metadata object or upgrade Next.js.
Please verify compliance with both accessibility guidelines and Next.js support for this feature.
🏁 Script executed:
#!/bin/bash
echo "Next.js version(s) in package.json:"
cat package.json | jq '.dependencies.next, .devDependencies.next'
echo
echo "Occurrences of `export const viewport` in the codebase:"
rg -n "export const viewport"
echo
echo "Occurrences of `export const metadata` in the codebase:"
rg -n "export const metadata"Length of output: 550
Allow user zoom for accessibility; Next.js standalone viewport export is supported
- According to WCAG 2.1 (Success Criterion 1.4.4), disabling or severely restricting zoom (e.g.
maximumScale: 1) can block users from resizing text up to 200%. To comply, remove themaximumScalesetting (or set it to at least5) so pinch-to-zoom remains available. - You’re on Next.js 15.3.2, which already supports a top-level
export const viewportin the App Router—no need to move it intometadata.
Suggested change:
export const viewport: Viewport = {
- maximumScale: 1,
+ // allow user zoom by omitting maximumScale (or set ≥5 if needed)
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const viewport: Viewport = { | |
| maximumScale: 1, | |
| }; | |
| export const viewport: Viewport = { | |
| // allow user zoom by omitting maximumScale (or set ≥5 if needed) | |
| }; |
🤖 Prompt for AI Agents
In app/layout.tsx around lines 24 to 26, the viewport export disables user zoom
by setting maximumScale to 1, which conflicts with accessibility guidelines. To
fix this, remove the maximumScale property or set it to a higher value (e.g., 5)
to allow pinch-to-zoom. Since Next.js 15.3.2 supports the standalone export
const viewport, keep it at the top level without moving it into metadata.
1 participant
Fixes #21, where the viewport on iOS Safari would remain zoomed in after a user sends a message, requiring them to manually zoom out.
The fix implements
maximum-scale=1in theviewportexport inapp/layout.tsx. This prevents the browser from scaling the viewport when the chat input is focused, ensuring a consistent and user-friendly experience on mobile devices.This approach was adopted after several other methods, including css changes, failed to produce the desired behavior.
Result:
Change tested to not affect user experience on other devices.
Summary by CodeRabbit