Skip to content

fix(mobile): Prevent auto-zoom on input focus on iOS (#21) #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jameshaworthcs wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(mobile): Prevent auto-zoom on input focus on iOS (#21) #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Metadata } from 'next';
import type { Metadata, Viewport } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import 'katex/dist/katex.min.css';
Expand All @@ -21,6 +21,10 @@ export const metadata: Metadata = {
description: 'Fastest AI Chat App',
};

export const viewport: Viewport = {
maximumScale: 1,
};
Comment on lines +24 to +26
Copy link

@coderabbitai coderabbitai bot Jun 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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 the maximumScale setting (or set it to at least 5) so pinch-to-zoom remains available.
  • You’re on Next.js 15.3.2, which already supports a top-level export const viewport in the App Router—no need to move it into metadata.

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.

Suggested change
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.


export default function RootLayout({
children,
}: Readonly<{
Expand Down