Fix modal UI paddings

src/element/new-goal.tsx

@@ -58,7 +58,7 @@ export function NewGoalDialog({ link }: NewGoalDialogProps) {
       <Dialog.Portal>
         <Dialog.Overlay className="dialog-overlay" />
         <Dialog.Content className="dialog-content">
-          <div className="new-goal">
+          <div className="new-goal content-inner">
             <div className="zap-goals">
               <Icon name="zap-filled" className="stream-zap-goals-icon" size={16} />
               <h3>

src/element/send-zap.tsx

@@ -129,7 +129,7 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
         </div>
         <div>
           <small>
-            <FormattedMessage defaultMessage="Zap amount in {currency}" values={{ amount: isFiat ? "USD" : "sats" }} />
+            <FormattedMessage defaultMessage="Zap amount in {currency}" values={{ currency: isFiat ? "USD" : "SATS" }} />
           </small>
           <div className="amounts">
             {(isFiat ? usdAmounts : satsAmounts).map(a => (
@@ -206,7 +206,9 @@ export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
       <Dialog.Portal>
         <Dialog.Overlay className="dialog-overlay" />
         <Dialog.Content className="dialog-content">
-          <SendZaps {...props} onFinish={() => setIsOpen(false)} />
+          <div className="content-inner">
+            <SendZaps {...props} onFinish={() => setIsOpen(false)} />
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

src/element/share-menu.tsx

@@ -56,23 +56,25 @@ export function ShareMenu({ ev }: { ev: NostrEvent }) {
         <Dialog.Portal>
           <Dialog.Overlay className="dialog-overlay" />
           <Dialog.Content className="dialog-content">
-            <h2>
+            <div className="content-inner">
-              <FormattedMessage defaultMessage="Share" />
+              <h2>
-            </h2>
+                <FormattedMessage defaultMessage="Share" />
-            <div className="paper">
+              </h2>
-              <Textarea
+              <div className="paper">
-                emojis={[]}
+                <Textarea
-                value={message}
+                  emojis={[]}
-                onChange={e => setMessage(e.target.value)}
+                  value={message}
-                onKeyDown={() => {
+                  onChange={e => setMessage(e.target.value)}
-                  //noop
+                  onKeyDown={() => {
-                }}
+                    //noop
-                rows={15}
+                  }}
-              />
+                  rows={15}
+                />
+              </div>
+              <AsyncButton className="btn btn-primary" onClick={sendMessage}>
+                <FormattedMessage defaultMessage="Send" />
+              </AsyncButton>
             </div>
-            <AsyncButton className="btn btn-primary" onClick={sendMessage}>
-              <FormattedMessage defaultMessage="Send" />
-            </AsyncButton>
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog.Root>

src/element/stream-cards.tsx

@@ -312,14 +312,16 @@ function EditCard({ card, cards }: EditCardProps) {
       <Dialog.Portal>
         <Dialog.Overlay className="dialog-overlay" />
         <Dialog.Content className="dialog-content">
-          <CardDialog
+          <div className="content-inner">
-            header={formatMessage({ defaultMessage: "Edit card" })}
+            <CardDialog
-            cta={formatMessage({ defaultMessage: "Save card" })}
+              header={formatMessage({ defaultMessage: "Edit card" })}
-            cancelCta={formatMessage({ defaultMessage: "Delete" })}
+              cta={formatMessage({ defaultMessage: "Save card" })}
-            card={card}
+              cancelCta={formatMessage({ defaultMessage: "Delete" })}
-            onSave={editCard}
+              card={card}
-            onCancel={onCancel}
+              onSave={editCard}
-          />
+              onCancel={onCancel}
+            />
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -383,7 +385,9 @@ function AddCard({ cards }: AddCardProps) {
         <Dialog.Portal>
           <Dialog.Overlay className="dialog-overlay" />
           <Dialog.Content className="dialog-content">
-            <CardDialog onSave={createCard} onCancel={onCancel} />
+            <div className="content-inner">
+              <CardDialog onSave={createCard} onCancel={onCancel} />
+            </div>
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog.Root>