jack/PocketVeto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent iOS auto-zoom on notifications page select elements

Browse Source 
iOS Safari zooms the page when focusing a select/input with font-size < 16px.
Bump all select elements on the notifications page to text-base (16px).

Authored by: Jack Levy
This commit is contained in:
Jack Levy
2026-03-15 19:48:25 -04:00
parent 7844367bd2
commit e12567ea3c
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/notifications/page.tsx
View File

@@ -777,7 +777,7 @@ export default function NotificationsPage() {
{unmutedMembers.length > 0 && ( {unmutedMembers.length > 0 && (
<select value="" <select value=""
onChange={(e) => { const id = e.target.value; if (id) setMutedMemberIds((prev) => [...prev, id]); }} onChange={(e) => { const id = e.target.value; if (id) setMutedMemberIds((prev) => [...prev, id]); }}
className="text-xs px-2 py-1.5 bg-background border border-border rounded-md"> className="text-base px-2 py-1.5 bg-background border border-border rounded-md">
<option value="" disabled>Mute a member…</option> <option value="" disabled>Mute a member…</option>
{unmutedMembers.map((f) => ( {unmutedMembers.map((f) => (
<option key={f.follow_value} value={f.follow_value}> <option key={f.follow_value} value={f.follow_value}>
@@ -835,7 +835,7 @@ export default function NotificationsPage() {
{unmutedTopics.length > 0 && ( {unmutedTopics.length > 0 && (
<select value="" <select value=""
onChange={(e) => { const tag = e.target.value; if (tag) setMutedTopicTags((prev) => [...prev, tag]); }} onChange={(e) => { const tag = e.target.value; if (tag) setMutedTopicTags((prev) => [...prev, tag]); }}
className="text-xs px-2 py-1.5 bg-background border border-border rounded-md"> className="text-base px-2 py-1.5 bg-background border border-border rounded-md">
<option value="" disabled>Mute a topic…</option> <option value="" disabled>Mute a topic…</option>
{unmutedTopics.map((f) => ( {unmutedTopics.map((f) => (
<option key={f.follow_value} value={f.follow_value}>{f.follow_value}</option> <option key={f.follow_value} value={f.follow_value}>{f.follow_value}</option>
@@ -884,14 +884,14 @@ export default function NotificationsPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<label className="text-sm text-muted-foreground">From</label> <label className="text-sm text-muted-foreground">From</label>
<select value={quietStart} onChange={(e) => setQuietStart(Number(e.target.value))} <select value={quietStart} onChange={(e) => setQuietStart(Number(e.target.value))}
className="px-2 py-1.5 text-sm bg-background border border-border rounded-md"> className="px-2 py-1.5 text-base bg-background border border-border rounded-md">
{HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)} {HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
</select> </select>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<label className="text-sm text-muted-foreground">To</label> <label className="text-sm text-muted-foreground">To</label>
<select value={quietEnd} onChange={(e) => setQuietEnd(Number(e.target.value))} <select value={quietEnd} onChange={(e) => setQuietEnd(Number(e.target.value))}
className="px-2 py-1.5 text-sm bg-background border border-border rounded-md"> className="px-2 py-1.5 text-base bg-background border border-border rounded-md">
{HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)} {HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
</select> </select>
</div> </div>