Fix mobile Safari zoom by setting font-size: 16px on input and textarea

[simonw]

Mobile Safari zooms in on focused text inputs with font-size < 16px.
The input had no explicit font-size (defaulting to ~13-14px) and the
textarea was explicitly 14px. Both are now 16px to prevent auto-zoom.

https://claude.ai/code/session_01642pptp9dN7AN7sCd7JTdZ

[claude]

Claude finished @simonw's task —— View job

---

PR Review: Fix mobile Safari zoom by setting font-size: 16px

Todo List:

• Read repository guidelines (CLAUDE.md)
• Examine the modified file and changes
• Analyze code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Review security concerns
• Assess test coverage needs
• Provide comprehensive review feedback

Review Summary

This PR addresses a specific mobile Safari UX issue by setting font-size: 16px on both input and textarea elements to prevent automatic zoom behavior.

✅ Code Quality & Best Practices

Excellent implementation:

• Targeted fix: The changes are minimal and precisely address the stated problem
• Consistent styling: Both input and textarea now have matching 16px font-size (lines hn-comments-for-user.html:11,14)
• Clean CSS: Well-organized inline styles with clear selectors
• Semantic HTML: Proper use of form elements with labels and accessibility attributes

Code structure is solid:

• Modern ES6+ JavaScript with async/await
• Clear separation of concerns (HTML structure, CSS styling, JavaScript behavior)
• Readable variable names and consistent code formatting

✅ No Bugs or Issues Detected

Robust implementation:

• Error handling present for API failures
• Input validation with trim() and empty user checks
• Proper DOM manipulation and event handling
• Safe innerHTML usage with htmlToText() sanitization function

✅ Performance Considerations

Well optimized:

• Single API call fetches up to 1000 comments efficiently
• Minimal DOM manipulation - updates textarea content once
• Event listeners properly attached without memory leaks
• No unnecessary re-renders or computations

✅ Security Assessment

Secure implementation:

• XSS Prevention: The htmlToText() function (lines 47-52) safely converts HTML to plain text using DOM parsing rather than regex
• URL encoding: Proper use of encodeURIComponent() for API requests (line 38)
• No eval() or dynamic code execution
• External API calls use HTTPS

⚠️ Test Coverage Gap

Missing tests for:

• Mobile Safari zoom prevention behavior (understandably difficult to automate)
• Input/textarea font-size verification
• API response handling edge cases

Suggestion: Consider adding a simple integration test that verifies the computed font-size is 16px on both elements.

🎯 Mobile Safari Fix Analysis

Perfect solution for the stated problem:

• Safari's 16px threshold is well-documented behavior
• The fix addresses both input types that could trigger zoom
• No side effects on desktop or other mobile browsers
• Maintains visual consistency across form elements

Final Assessment: ✅ APPROVED

This is a textbook example of a focused, well-implemented fix. The changes are minimal, targeted, and solve the exact problem without introducing complexity or side effects. The 16px font-size standard for preventing mobile Safari zoom is a widely accepted best practice.