From 0a2474d2f531c8630978bebd07e4195a9aef998e Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Mon, 14 Jul 2025 03:06:17 +0000
Subject: [PATCH] mobile enhancements

---
 src/components/WalletModal.tsx | 383 +++++++++++++++-----------
 src/components/ZapDialog.tsx   | 481 +++++++++++++++++++++++----------
 2 files changed, 552 insertions(+), 312 deletions(-)

diff --git a/src/components/WalletModal.tsx b/src/components/WalletModal.tsx
index 05a3d02..e6725f8 100644
--- a/src/components/WalletModal.tsx
+++ b/src/components/WalletModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle } from 'lucide-react';
+import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -10,6 +10,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -18,6 +27,7 @@ import { Separator } from '@/components/ui/separator';
 import { useNWC } from '@/hooks/useNWCContext';
 import { useWallet } from '@/hooks/useWallet';
 import { useToast } from '@/hooks/useToast';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface WalletModalProps {
   children?: React.ReactNode;
@@ -30,6 +40,7 @@ export function WalletModal({ children, className }: WalletModalProps) {
   const [connectionUri, setConnectionUri] = useState('');
   const [alias, setAlias] = useState('');
   const [isConnecting, setIsConnecting] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     connections,
@@ -81,6 +92,213 @@ export function WalletModal({ children, className }: WalletModalProps) {
     });
   };
 
+  // Shared content component
+  const WalletContent = () => (
+    <div className="space-y-6 px-4 pb-4">
+      {/* Current Status */}
+      <div className="space-y-3">
+        <h3 className="font-medium">Current Status</h3>
+
+        <div className="grid gap-3">
+          {/* WebLN */}
+          <div className="flex items-center justify-between p-3 border rounded-lg">
+            <div className="flex items-center gap-3">
+              <Globe className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">WebLN</p>
+                <p className="text-xs text-muted-foreground">Browser extension</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {hasWebLN && <CheckCircle className="h-4 w-4 text-green-600" />}
+              <Badge variant={hasWebLN ? "default" : "secondary"} className="text-xs">
+                {isDetecting ? "..." : hasWebLN ? "Ready" : "Not Found"}
+              </Badge>
+            </div>
+          </div>
+
+          {/* NWC */}
+          <div className="flex items-center justify-between p-3 border rounded-lg">
+            <div className="flex items-center gap-3">
+              <WalletMinimal className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Nostr Wallet Connect</p>
+                <p className="text-xs text-muted-foreground">
+                  {connections.length > 0
+                    ? `${connections.length} wallet${connections.length !== 1 ? 's' : ''} connected`
+                    : "Remote wallet connection"
+                  }
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {hasNWC && <CheckCircle className="h-4 w-4 text-green-600" />}
+              <Badge variant={hasNWC ? "default" : "secondary"} className="text-xs">
+                {hasNWC ? "Ready" : "None"}
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* NWC Management */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="font-medium">Nostr Wallet Connect</h3>
+          <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm" variant="outline">
+                <Plus className="h-4 w-4 mr-1" />
+                Add
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Connect NWC Wallet</DialogTitle>
+                <DialogDescription>
+                  Enter your connection string from a compatible wallet.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4 px-4">
+                <div>
+                  <Label htmlFor="alias">Wallet Name (optional)</Label>
+                  <Input
+                    id="alias"
+                    placeholder="My Lightning Wallet"
+                    value={alias}
+                    onChange={(e) => setAlias(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="connection-uri">Connection URI</Label>
+                  <Textarea
+                    id="connection-uri"
+                    placeholder="nostr+walletconnect://..."
+                    value={connectionUri}
+                    onChange={(e) => setConnectionUri(e.target.value)}
+                    rows={3}
+                  />
+                </div>
+              </div>
+              <DialogFooter className="px-4">
+                <Button
+                  onClick={handleAddConnection}
+                  disabled={isConnecting || !connectionUri.trim()}
+                  className="w-full"
+                >
+                  {isConnecting ? 'Connecting...' : 'Connect'}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+        {/* Connected Wallets List */}
+        {connections.length === 0 ? (
+          <div className="text-center py-6 text-muted-foreground">
+            <p className="text-sm">No wallets connected</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {connections.map((connection) => {
+              const info = connectionInfo[connection.connectionString];
+              const isActive = activeConnection === connection.connectionString;
+
+              return (
+                <div key={connection.connectionString} className={`flex items-center justify-between p-3 border rounded-lg ${isActive ? 'ring-2 ring-primary' : ''}`}>
+                  <div className="flex items-center gap-3">
+                    <WalletMinimal className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <p className="text-sm font-medium">
+                        {connection.alias || info?.alias || 'Lightning Wallet'}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        NWC Connection
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {isActive && <CheckCircle className="h-4 w-4 text-green-600" />}
+                    {!isActive && (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => handleSetActive(connection.connectionString)}
+                      >
+                        <Zap className="h-3 w-3" />
+                      </Button>
+                    )}
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveConnection(connection.connectionString)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Help */}
+      {!hasWebLN && connections.length === 0 && (
+        <>
+          <Separator />
+          <div className="text-center py-4 space-y-2">
+            <p className="text-sm text-muted-foreground">
+              Install a WebLN extension or connect a NWC wallet for zaps.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          {children || (
+            <Button variant="outline" size="sm" className={className}>
+              <Wallet className="h-4 w-4 mr-2" />
+              Wallet Settings
+            </Button>
+          )}
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[90vh]">
+          <DrawerHeader className="text-center relative">
+            {/* Close button */}
+            <DrawerClose asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-4 top-4"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DrawerClose>
+
+            <DrawerTitle className="flex items-center justify-center gap-2 pt-2">
+              <Wallet className="h-5 w-5" />
+              Lightning Wallet
+            </DrawerTitle>
+            <DrawerDescription>
+              Connect your lightning wallet to send zaps instantly.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="overflow-y-auto">
+            <WalletContent />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -101,168 +319,7 @@ export function WalletModal({ children, className }: WalletModalProps) {
             Connect your lightning wallet to send zaps instantly.
           </DialogDescription>
         </DialogHeader>
-
-        <div className="space-y-6">
-          {/* Current Status */}
-          <div className="space-y-3">
-            <h3 className="font-medium">Current Status</h3>
-
-            <div className="grid gap-3">
-              {/* WebLN */}
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div className="flex items-center gap-3">
-                  <Globe className="h-4 w-4 text-muted-foreground" />
-                  <div>
-                    <p className="text-sm font-medium">WebLN</p>
-                    <p className="text-xs text-muted-foreground">Browser extension</p>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  {hasWebLN && <CheckCircle className="h-4 w-4 text-green-600" />}
-                  <Badge variant={hasWebLN ? "default" : "secondary"} className="text-xs">
-                    {isDetecting ? "..." : hasWebLN ? "Ready" : "Not Found"}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* NWC */}
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div className="flex items-center gap-3">
-                  <WalletMinimal className="h-4 w-4 text-muted-foreground" />
-                  <div>
-                    <p className="text-sm font-medium">Nostr Wallet Connect</p>
-                    <p className="text-xs text-muted-foreground">
-                      {connections.length > 0
-                        ? `${connections.length} wallet${connections.length !== 1 ? 's' : ''} connected`
-                        : "Remote wallet connection"
-                      }
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  {hasNWC && <CheckCircle className="h-4 w-4 text-green-600" />}
-                  <Badge variant={hasNWC ? "default" : "secondary"} className="text-xs">
-                    {hasNWC ? "Ready" : "None"}
-                  </Badge>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
-          {/* NWC Management */}
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="font-medium">Nostr Wallet Connect</h3>
-              <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
-                <DialogTrigger asChild>
-                  <Button size="sm" variant="outline">
-                    <Plus className="h-4 w-4 mr-1" />
-                    Add
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Connect NWC Wallet</DialogTitle>
-                    <DialogDescription>
-                      Enter your connection string from a compatible wallet.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className="space-y-4">
-                    <div>
-                      <Label htmlFor="alias">Wallet Name (optional)</Label>
-                      <Input
-                        id="alias"
-                        placeholder="My Lightning Wallet"
-                        value={alias}
-                        onChange={(e) => setAlias(e.target.value)}
-                      />
-                    </div>
-                    <div>
-                      <Label htmlFor="connection-uri">Connection URI</Label>
-                      <Textarea
-                        id="connection-uri"
-                        placeholder="nostr+walletconnect://..."
-                        value={connectionUri}
-                        onChange={(e) => setConnectionUri(e.target.value)}
-                        rows={3}
-                      />
-                    </div>
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      onClick={handleAddConnection}
-                      disabled={isConnecting || !connectionUri.trim()}
-                    >
-                      {isConnecting ? 'Connecting...' : 'Connect'}
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </div>
-            {/* Connected Wallets List */}
-            {connections.length === 0 ? (
-              <div className="text-center py-6 text-muted-foreground">
-                <p className="text-sm">No wallets connected</p>
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {connections.map((connection) => {
-                  const info = connectionInfo[connection.connectionString];
-                  const isActive = activeConnection === connection.connectionString;
-
-                  return (
-                    <div key={connection.connectionString} className={`flex items-center justify-between p-3 border rounded-lg ${isActive ? 'ring-2 ring-primary' : ''}`}>
-                      <div className="flex items-center gap-3">
-                        <WalletMinimal className="h-4 w-4 text-muted-foreground" />
-                        <div>
-                          <p className="text-sm font-medium">
-                            {connection.alias || info?.alias || 'Lightning Wallet'}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            NWC Connection
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        {isActive && <CheckCircle className="h-4 w-4 text-green-600" />}
-                        {!isActive && (
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => handleSetActive(connection.connectionString)}
-                          >
-                            <Zap className="h-3 w-3" />
-                          </Button>
-                        )}
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => handleRemoveConnection(connection.connectionString)}
-                        >
-                          <Trash2 className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          {/* Help */}
-          {!hasWebLN && connections.length === 0 && (
-            <>
-              <Separator />
-              <div className="text-center py-4 space-y-2">
-                <p className="text-sm text-muted-foreground">
-                  Install a WebLN extension or connect a NWC wallet for zaps.
-                </p>
-              </div>
-            </>
-          )}
-        </div>
+        <WalletContent />
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/ZapDialog.tsx b/src/components/ZapDialog.tsx
index ebc63aa..bbf9206 100644
--- a/src/components/ZapDialog.tsx
+++ b/src/components/ZapDialog.tsx
@@ -1,15 +1,23 @@
 import { useState, useEffect, useRef } from 'react';
-import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket } from 'lucide-react';
+import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -21,6 +29,7 @@ import { useAuthor } from '@/hooks/useAuthor';
 import { useToast } from '@/hooks/useToast';
 import { useZaps } from '@/hooks/useZaps';
 import { useWallet } from '@/hooks/useWallet';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import type { Event } from 'nostr-tools';
 import QRCode from 'qrcode';
 
@@ -50,6 +59,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
   const [copied, setCopied] = useState(false);
   const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (target) {
@@ -120,10 +130,321 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
     zap(finalAmount, comment);
   };
 
+  // Shared content component
+  const ZapContent = () => (
+    <>
+      {invoice ? (
+        <div className="space-y-4 px-4 pb-4">
+          {/* Payment amount display */}
+          <div className="text-center">
+            <div className="text-2xl font-bold">{amount} sats</div>
+          </div>
+
+          <Separator />
+
+          {/* QR Code */}
+          <div className="flex justify-center">
+            <Card className="p-4 max-w-full">
+              <CardContent className="p-0 flex justify-center">
+                {qrCodeUrl ? (
+                  <img
+                    src={qrCodeUrl}
+                    alt="Lightning Invoice QR Code"
+                    className="w-56 h-56 max-w-full max-h-full object-contain"
+                  />
+                ) : (
+                  <div className="w-56 h-56 max-w-full bg-muted animate-pulse rounded" />
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Invoice input */}
+          <div className="space-y-2">
+            <Label htmlFor="invoice">Lightning Invoice</Label>
+            <div className="flex gap-2 min-w-0">
+              <Input
+                id="invoice"
+                value={invoice}
+                readOnly
+                className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                onClick={(e) => e.currentTarget.select()}
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleCopy}
+                className="shrink-0"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Payment buttons */}
+          <div className="space-y-3">
+            {hasWebLN && (
+              <Button
+                onClick={() => {
+                  const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+                  zap(finalAmount, comment);
+                }}
+                disabled={isZapping}
+                className="w-full"
+                size="lg"
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                {isZapping ? "Processing..." : "Pay with WebLN"}
+              </Button>
+            )}
+
+            <Button
+              variant="outline"
+              onClick={openInWallet}
+              className="w-full"
+              size="lg"
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in Lightning Wallet
+            </Button>
+
+            <div className="text-[.65rem] text-muted-foreground text-center px-2">
+              Scan the QR code or copy the invoice to pay with any Lightning wallet.
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="grid gap-4 px-4 py-4 w-full overflow-hidden">
+            <ToggleGroup
+              type="single"
+              value={String(amount)}
+              onValueChange={(value) => {
+                if (value) {
+                  setAmount(parseInt(value, 10));
+                }
+              }}
+              className="grid grid-cols-5 gap-2 w-full"
+            >
+              {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
+                <ToggleGroupItem
+                  key={presetAmount}
+                  value={String(presetAmount)}
+                  className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
+                >
+                  <Icon className="h-5 w-5 mb-1" />
+                  <span className="truncate">{presetAmount}</span>
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+            <div className="flex items-center gap-2">
+              <div className="h-px flex-1 bg-muted" />
+              <span className="text-xs text-muted-foreground">OR</span>
+              <div className="h-px flex-1 bg-muted" />
+            </div>
+            <Input
+              ref={inputRef}
+              id="custom-amount"
+              type="number"
+              placeholder="Custom amount"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              className="w-full"
+            />
+            <Textarea
+              id="custom-comment"
+              placeholder="Custom comment"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              className="w-full resize-none"
+              rows={3}
+            />
+          </div>
+          <div className="px-4 pb-4">
+            <Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
+              {isZapping ? (
+                'Creating invoice...'
+              ) : (
+                <>
+                  <Zap className="h-4 w-4 mr-2" />
+                  Zap {amount} sats
+                </>
+              )}
+            </Button>
+          </div>
+        </>
+      )}
+    </>
+  );
+
   if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
     return null;
   }
 
+  if (isMobile) {
+    // Full screen payment view on mobile
+    if (invoice) {
+      return (
+        <div className="fixed inset-0 z-50 bg-background flex flex-col">
+          {/* Header with back and close buttons */}
+          <div className="flex items-center justify-between p-4 pb-0">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setInvoice(null);
+                setQrCodeUrl('');
+              }}
+              className="flex items-center gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+
+            <h1 className="text-lg font-semibold">Lightning Payment</h1>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setOpen(false)}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="space-y-4">
+              {/* Payment amount display */}
+              <div className="text-center">
+                <div className="text-3xl font-bold">{amount} sats</div>
+                <div className="text-sm text-muted-foreground">Lightning Network Payment</div>
+              </div>
+
+              <Separator />
+
+              {/* QR Code */}
+              <div className="flex justify-center">
+                <Card className="p-6 max-w-full">
+                  <CardContent className="p-0 flex justify-center">
+                    {qrCodeUrl ? (
+                      <img
+                        src={qrCodeUrl}
+                        alt="Lightning Invoice QR Code"
+                        className="w-72 h-72 max-w-full max-h-full object-contain"
+                      />
+                    ) : (
+                      <div className="w-72 h-72 max-w-full bg-muted animate-pulse rounded" />
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Invoice input */}
+              <div className="space-y-2">
+                <Label htmlFor="invoice">Lightning Invoice</Label>
+                <div className="flex gap-2 min-w-0">
+                  <Input
+                    id="invoice"
+                    value={invoice}
+                    readOnly
+                    className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                    onClick={(e) => e.currentTarget.select()}
+                  />
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={handleCopy}
+                    className="shrink-0"
+                  >
+                    {copied ? (
+                      <Check className="h-4 w-4 text-green-600" />
+                    ) : (
+                      <Copy className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Payment buttons */}
+              <div className="space-y-3">
+                {hasWebLN && (
+                  <Button
+                    onClick={() => {
+                      const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+                      zap(finalAmount, comment);
+                    }}
+                    disabled={isZapping}
+                    className="w-full"
+                    size="lg"
+                  >
+                    <Zap className="h-4 w-4 mr-2" />
+                    {isZapping ? "Processing..." : "Pay with WebLN"}
+                  </Button>
+                )}
+
+                <Button
+                  variant="outline"
+                  onClick={openInWallet}
+                  className="w-full"
+                  size="lg"
+                >
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  Open in Lightning Wallet
+                </Button>
+
+                <div className="text-xs text-muted-foreground text-center px-2">
+                  Scan the QR code or copy the invoice to pay with any Lightning wallet.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Drawer for amount selection on mobile
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <div className={`cursor-pointer ${className || ''}`}>
+            {children}
+          </div>
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[95vh]" data-testid="zap-modal">
+          <DrawerHeader className="text-center relative">
+            {/* Close button */}
+            <DrawerClose asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-4 top-4"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DrawerClose>
+
+            <DrawerTitle className="text-lg break-words pt-2">
+              Send a Zap
+            </DrawerTitle>
+            <DrawerDescription className="text-sm break-words">
+              Zaps are small Bitcoin payments that support the creator of this item.
+              {' '}If you enjoyed this, consider sending a zap!
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="overflow-y-auto">
+            <ZapContent />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -131,12 +452,14 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
           {children}
         </div>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]" data-testid="zap-modal">
+      <DialogContent className="sm:max-w-[425px] max-h-[95vh] overflow-hidden" data-testid="zap-modal">
         <DialogHeader>
-          <DialogTitle>{invoice ? 'Lightning Payment' : 'Send a Zap'}</DialogTitle>
-          <DialogDescription>
+          <DialogTitle className="text-lg break-words">
+            {invoice ? 'Lightning Payment' : 'Send a Zap'}
+          </DialogTitle>
+          <DialogDescription className="text-sm break-words">
             {invoice ? (
-              'Scan the QR code or copy the invoice to pay with any Lightning wallet'
+              'Pay with Bitcoin Lightning Network'
             ) : (
               <>
                 Zaps are small Bitcoin payments that support the creator of this item.
@@ -145,149 +468,9 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
             )}
           </DialogDescription>
         </DialogHeader>
-        {invoice ? (
-          <div className="space-y-6 overflow-y-auto max-h-[calc(100vh-200px)] p-1">
-            {/* Payment amount display */}
-            <div className="text-center">
-              <div className="text-2xl font-bold">{amount} sats</div>
-              <div className="text-sm text-muted-foreground">Lightning Network Payment</div>
-            </div>
-
-            <Separator />
-
-            {/* QR Code */}
-            <div className="flex justify-center">
-              <Card className="p-4">
-                <CardContent className="p-0">
-                  {qrCodeUrl ? (
-                    <img
-                      src={qrCodeUrl}
-                      alt="Lightning Invoice QR Code"
-                      className="w-64 h-64"
-                    />
-                  ) : (
-                    <div className="w-64 h-64 bg-muted animate-pulse rounded" />
-                  )}
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* Invoice input */}
-            <div className="space-y-2">
-              <Label htmlFor="invoice">Lightning Invoice</Label>
-              <div className="flex gap-2">
-                <Input
-                  id="invoice"
-                  value={invoice}
-                  readOnly
-                  className="font-mono text-xs"
-                  onClick={(e) => e.currentTarget.select()}
-                />
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={handleCopy}
-                  className="shrink-0"
-                >
-                  {copied ? (
-                    <Check className="h-4 w-4 text-green-600" />
-                  ) : (
-                    <Copy className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-
-            {/* Payment buttons */}
-            <div className="space-y-3">
-              {hasWebLN && (
-                <Button
-                  onClick={() => {
-                    const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
-                    zap(finalAmount, comment);
-                  }}
-                  disabled={isZapping}
-                  className="w-full"
-                  size="lg"
-                >
-                  <Zap className="h-4 w-4 mr-2" />
-                  {isZapping ? "Processing..." : "Pay with WebLN"}
-                </Button>
-              )}
-
-              <Button
-                variant="outline"
-                onClick={openInWallet}
-                className="w-full"
-                size="lg"
-              >
-                <ExternalLink className="h-4 w-4 mr-2" />
-                Open in Lightning Wallet
-              </Button>
-
-              <div className="text-xs text-muted-foreground text-center">
-                Scan the QR code or copy the invoice to pay with any Lightning wallet
-              </div>
-            </div>
-          </div>
-        ) : (
-          <>
-            <div className="grid gap-4 py-4">
-              <ToggleGroup
-                type="single"
-                value={String(amount)}
-                onValueChange={(value) => {
-                  if (value) {
-                    setAmount(parseInt(value, 10));
-                  }
-                }}
-                className="grid grid-cols-5 gap-2"
-              >
-                {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
-                  <ToggleGroupItem
-                    key={presetAmount}
-                    value={String(presetAmount)}
-                    className="flex flex-col h-auto"
-                  >
-                    <Icon className="h-5 w-5 mb-1.5" />
-                    {presetAmount}
-                  </ToggleGroupItem>
-                ))}
-              </ToggleGroup>
-              <div className="flex items-center gap-2">
-                <div className="h-px flex-1 bg-muted" />
-                <span className="text-xs text-muted-foreground">OR</span>
-                <div className="h-px flex-1 bg-muted" />
-              </div>
-              <Input
-                ref={inputRef}
-                id="custom-amount"
-                type="number"
-                placeholder="Custom amount"
-                value={amount}
-                onChange={(e) => setAmount(e.target.value)}
-              />
-              <Textarea
-                id="custom-comment"
-                placeholder="Custom comment"
-                value={comment}
-                onChange={(e) => setComment(e.target.value)}
-              />
-            </div>
-            <DialogFooter>
-              <Button onClick={handleZap} className="w-full" disabled={isZapping}>
-                {isZapping ? (
-                  'Creating invoice...'
-                ) : (
-                  <>
-                    <Zap className="h-4 w-4 mr-2" />
-                    Zap {amount} sats
-                  </>
-                )}
-              </Button>
-            </DialogFooter>
-          </>
-        )}
+        <div className="overflow-y-auto">
+          <ZapContent />
+        </div>
       </DialogContent>
     </Dialog>
   );