From 50a182ecfe3902386d4690e5200d21568e3ba643 Mon Sep 17 00:00:00 2001
From: Tony Giorgio <tonygiorgio@protonmail.com>
Date: Thu, 30 Oct 2025 21:38:37 -0500
Subject: [PATCH] Fix mobile responsiveness for anonymous signup dialogs

- Add viewport margins to prevent edge-to-edge stretching on mobile
- Add vertical scrolling and height constraints for longer dialogs
- Improve text wrapping for checkbox labels and input fields
- Apply fixes to GuestPaymentWarningDialog, GuestSignupWarningDialog, GuestCredentialsDialog, and VerificationModal

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 frontend/src/components/GuestCredentialsDialog.tsx |  6 +++---
 .../src/components/GuestPaymentWarningDialog.tsx   |  2 +-
 .../src/components/GuestSignupWarningDialog.tsx    | 14 +++++++-------
 frontend/src/components/VerificationModal.tsx      |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/GuestCredentialsDialog.tsx b/frontend/src/components/GuestCredentialsDialog.tsx
index 975a25e3..580eca84 100644
--- a/frontend/src/components/GuestCredentialsDialog.tsx
+++ b/frontend/src/components/GuestCredentialsDialog.tsx
@@ -50,7 +50,7 @@ export function GuestCredentialsDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="sm:max-w-[500px] [&>button]:hidden"
+        className="max-w-[calc(100vw-2rem)] sm:max-w-[500px] max-h-[calc(100vh-2rem)] overflow-y-auto [&>button]:hidden"
         onInteractOutside={(e) => e.preventDefault()}
         onEscapeKeyDown={(e) => e.preventDefault()}
       >
@@ -88,7 +88,7 @@ export function GuestCredentialsDialog({
               Your Account ID
             </Label>
             <div className="flex gap-2">
-              <Input id="uuid" value={uuid} readOnly className="font-mono text-sm" />
+              <Input id="uuid" value={uuid} readOnly className="font-mono text-xs sm:text-sm" />
               <Button
                 type="button"
                 variant="outline"
@@ -128,7 +128,7 @@ export function GuestCredentialsDialog({
             />
             <Label
               htmlFor="backed-up"
-              className="text-sm font-medium leading-relaxed cursor-pointer"
+              className="text-sm font-medium leading-relaxed cursor-pointer break-words"
             >
               I have securely saved my Account ID and understand I cannot recover my account without
               it
diff --git a/frontend/src/components/GuestPaymentWarningDialog.tsx b/frontend/src/components/GuestPaymentWarningDialog.tsx
index 456eee2f..7d437def 100644
--- a/frontend/src/components/GuestPaymentWarningDialog.tsx
+++ b/frontend/src/components/GuestPaymentWarningDialog.tsx
@@ -30,7 +30,7 @@ export function GuestPaymentWarningDialog({ open, onOpenChange }: GuestPaymentWa
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="sm:max-w-[425px] [&>button]:hidden"
+        className="max-w-[calc(100vw-2rem)] sm:max-w-[425px] [&>button]:hidden"
         onInteractOutside={(e) => e.preventDefault()}
         onEscapeKeyDown={(e) => e.preventDefault()}
       >
diff --git a/frontend/src/components/GuestSignupWarningDialog.tsx b/frontend/src/components/GuestSignupWarningDialog.tsx
index 9434e19e..79607b32 100644
--- a/frontend/src/components/GuestSignupWarningDialog.tsx
+++ b/frontend/src/components/GuestSignupWarningDialog.tsx
@@ -41,7 +41,7 @@ export function GuestSignupWarningDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[550px] [&>button]:hidden">
+      <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-[550px] max-h-[calc(100vh-2rem)] overflow-y-auto [&>button]:hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-amber-600 dark:text-amber-500">
             <AlertTriangle className="w-5 h-5" />
@@ -63,10 +63,10 @@ export function GuestSignupWarningDialog({
                   setBitcoinPaymentAgreed(checked === true)
                 }
               />
-              <div className="grid gap-1.5 leading-none">
+              <div className="grid gap-1.5 leading-none flex-1">
                 <Label
                   htmlFor="bitcoin-payment"
-                  className="text-sm font-medium leading-relaxed cursor-pointer"
+                  className="text-sm font-medium leading-relaxed cursor-pointer break-words"
                 >
                   I understand I <strong>MUST pay for a full year in Bitcoin only</strong>. No
                   credit card, no Stripe, no monthly payment options, and{" "}
@@ -84,10 +84,10 @@ export function GuestSignupWarningDialog({
                   setNoSupportAgreed(checked === true)
                 }
               />
-              <div className="grid gap-1.5 leading-none">
+              <div className="grid gap-1.5 leading-none flex-1">
                 <Label
                   htmlFor="no-support"
-                  className="text-sm font-medium leading-relaxed cursor-pointer"
+                  className="text-sm font-medium leading-relaxed cursor-pointer break-words"
                 >
                   I understand there is <strong>absolutely no support</strong> available for
                   anonymous accounts. If I have issues, I cannot contact support for help.
@@ -104,10 +104,10 @@ export function GuestSignupWarningDialog({
                   setBackupCredentialsAgreed(checked === true)
                 }
               />
-              <div className="grid gap-1.5 leading-none">
+              <div className="grid gap-1.5 leading-none flex-1">
                 <Label
                   htmlFor="backup-credentials"
-                  className="text-sm font-medium leading-relaxed cursor-pointer"
+                  className="text-sm font-medium leading-relaxed cursor-pointer break-words"
                 >
                   I understand I <strong>MUST backup my Account ID</strong> after signup. My Account
                   ID will only be shown once, and if I lose it, I will permanently lose access to my
diff --git a/frontend/src/components/VerificationModal.tsx b/frontend/src/components/VerificationModal.tsx
index c3d8f974..247f8c4a 100644
--- a/frontend/src/components/VerificationModal.tsx
+++ b/frontend/src/components/VerificationModal.tsx
@@ -98,7 +98,7 @@ export function VerificationModal() {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-[425px] [&>button]:hidden">
+      <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-[425px] [&>button]:hidden">
         <DialogHeader>
           <DialogTitle>Verify Your Email</DialogTitle>
           <DialogDescription>