Fix iOS Safari auto-zoom on input focus by ensuring 16px minimum font size on mobile

src/components/ZapDialog.tsx

@@ -107,7 +107,7 @@ const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
                 id="invoice"
                 value={invoice}
                 readOnly
-                className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                className="font-mono text-base md:text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
                 onClick={(e) => e.currentTarget.select()}
               />
               <Button
@@ -194,14 +194,14 @@ const ZapContent = forwardRef<HTMLDivElement, ZapContentProps>(({
             placeholder="Custom amount"
             value={amount}
             onChange={(e) => setAmount(e.target.value)}
-            className="w-full text-sm"
+            className="w-full"
           />
           <Textarea
             id="custom-comment"
             placeholder="Add a comment (optional)"
             value={comment}
             onChange={(e) => setComment(e.target.value)}
-            className="w-full resize-none text-sm"
+            className="w-full resize-none"
             rows={2}
           />
         </div>

src/components/auth/SignupDialog.tsx

@@ -185,7 +185,7 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose }) => {
                   type={showKey ? "text" : "password"}
                   value={nsec}
                   readOnly
-                  className="pr-10 font-mono text-sm"
+                  className="pr-10 font-mono"
                 />
                 <Button
                   type="button"

src/components/dm/DMChatArea.tsx

@@ -476,14 +476,14 @@ export const DMChatArea = ({ pubkey, onBack, className }: DMChatAreaProps) => {
               onValueChange={(value) => setSelectedProtocol(value as MessageProtocol)}
               disabled={!allowSelection}
             >
-              <SelectTrigger className="h-[32px] w-[90px] text-xs px-2">
+              <SelectTrigger className="h-[32px] w-[90px] text-base md:text-xs px-2">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value={MESSAGE_PROTOCOL.NIP17} className="text-xs">
+                <SelectItem value={MESSAGE_PROTOCOL.NIP17} className="text-base md:text-xs">
                   NIP-17
                 </SelectItem>
-                <SelectItem value={MESSAGE_PROTOCOL.NIP04} className="text-xs">
+                <SelectItem value={MESSAGE_PROTOCOL.NIP04} className="text-base md:text-xs">
                   NIP-04
                 </SelectItem>
               </SelectContent>

src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}

src/components/ui/input-otp.tsx

@@ -39,7 +39,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className
       )}

src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 md:text-sm",
       className
     )}
     {...props}

src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}