From a834e7652269eee5a39309bf72c979c6217eaf4d Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Tue, 24 Jun 2025 21:59:33 +0800
Subject: [PATCH] style: adjust padding and margin for EmbeddedLNInvoice

---
 src/components/Content/index.tsx              | 2 +-
 src/components/Embedded/EmbeddedLNInvoice.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 8b569a92..9cb94921 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -107,7 +107,7 @@ const Content = memo(({ event, className }: { event: Event; className?: string }
           return <EmbeddedNormalUrl url={node.data} key={index} />
         }
         if (node.type === 'invoice') {
-          return <EmbeddedLNInvoice invoice={node.data} key={index} />
+          return <EmbeddedLNInvoice invoice={node.data} key={index} className="mt-2" />
         }
         if (node.type === 'websocket-url') {
           return <EmbeddedWebsocketUrl url={node.data} key={index} />
diff --git a/src/components/Embedded/EmbeddedLNInvoice.tsx b/src/components/Embedded/EmbeddedLNInvoice.tsx
index e079a28d..376606f1 100644
--- a/src/components/Embedded/EmbeddedLNInvoice.tsx
+++ b/src/components/Embedded/EmbeddedLNInvoice.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { formatAmount, getAmountFromInvoice } from '@/lib/lightning'
+import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import lightning from '@/services/lightning.service'
 import { Loader, Zap } from 'lucide-react'
@@ -7,7 +8,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 
-export function EmbeddedLNInvoice({ invoice }: { invoice: string }) {
+export function EmbeddedLNInvoice({ invoice, className }: { invoice: string; className?: string }) {
   const { t } = useTranslation()
   const { checkLogin, pubkey } = useNostr()
   const [paying, setPaying] = useState(false)
@@ -41,7 +42,7 @@ export function EmbeddedLNInvoice({ invoice }: { invoice: string }) {
 
   return (
     <div
-      className="p-2 sm:p-3 border rounded-lg cursor-default flex flex-col gap-3 max-w-sm"
+      className={cn('p-3 border rounded-lg cursor-default flex flex-col gap-3 max-w-sm', className)}
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex items-center gap-2">