bug-fix

src/components/Note/Superchat.tsx

@@ -5,7 +5,12 @@ import { formatAmount } from '@/lib/lightning'
 import { parsePaytoTagType } from '@/lib/payto'
 import { relayHintsFromEventTags } from '@/lib/relay-list-builder'
 import { getPaymentNotificationInfo, getSuperchatReferenceFetchId } from '@/lib/superchat'
-import { superchatTitleClass } from '@/lib/superchat-ui'
+import {
+  superchatChromePaymentChipClass,
+  superchatChromePaymentIconClass,
+  superchatChromeRowClass,
+  superchatTitleClass
+} from '@/lib/superchat-ui'
 import { toProfile } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { Event } from 'nostr-tools'
@@ -137,12 +142,12 @@ export default function Superchat({
             <>
               <SuperchatPaymentMethodLabel
                 paytoType={paytoType}
-                className="px-2.5 py-1.5 text-lg"
+                className={superchatChromePaymentChipClass}
-                imgClassName="size-5"
+                imgClassName={superchatChromePaymentIconClass}
               />
-              <span className={cn('text-xl', superchatTitleClass)}>{t('Superchat')}</span>
+              <span className={cn(superchatChromeRowClass, superchatTitleClass)}>{t('Superchat')}</span>
               {showAmount ? (
-                <span className="text-xl font-bold tabular-nums tracking-tight text-foreground">
+                <span className="text-sm font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amountSats)} {t('sats')}
                 </span>
               ) : null}
@@ -151,11 +156,11 @@ export default function Superchat({
             <>
               <SuperchatPaymentMethodLabel
                 paytoType={paytoType}
-                className="px-2.5 py-1.5 text-lg"
+                className={superchatChromePaymentChipClass}
-                imgClassName="size-5"
+                imgClassName={superchatChromePaymentIconClass}
               />
               {showAmount ? (
-                <span className="text-lg font-bold tabular-nums tracking-tight text-foreground">
+                <span className="text-sm font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amountSats)} {t('sats')}
                 </span>
               ) : null}

src/components/Note/Zap.tsx

@@ -6,7 +6,12 @@ import { formatAmount } from '@/lib/lightning'
 import { openNoteFromFetchOrCache } from '@/lib/navigation-related-events'
 import { relayHintsFromEventTags } from '@/lib/relay-list-builder'
 import { getSuperchatPaytoType } from '@/lib/superchat'
-import { superchatTitleClass } from '@/lib/superchat-ui'
+import {
+  superchatChromePaymentChipClass,
+  superchatChromePaymentIconClass,
+  superchatChromeRowClass,
+  superchatTitleClass
+} from '@/lib/superchat-ui'
 import { toProfile } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { Event } from 'nostr-tools'
@@ -155,22 +160,22 @@ export default function Zap({
             <>
               <SuperchatPaymentMethodLabel
                 paytoType={paytoType}
-                className="px-2.5 py-1.5 text-lg"
+                className={superchatChromePaymentChipClass}
-                imgClassName="size-5"
+                imgClassName={superchatChromePaymentIconClass}
               />
-              <span className={cn('text-xl', superchatTitleClass)}>{t('Superchat')}</span>
+              <span className={cn(superchatChromeRowClass, superchatTitleClass)}>{t('Superchat')}</span>
               {showAmount ? (
-                <span className="text-xl font-bold tabular-nums tracking-tight text-foreground">
+                <span className="text-sm font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amount)} {t('sats')}
                 </span>
               ) : null}
             </>
           ) : (
             <>
-              <ZapIcon className="size-5 shrink-0 text-primary" aria-hidden />
+              <ZapIcon className="size-4 shrink-0 text-primary" aria-hidden />
-              <span className="text-lg font-semibold text-foreground">{t('Zap')}</span>
+              <span className="text-sm font-semibold text-foreground">{t('Zap')}</span>
               {showAmount ? (
-                <span className="text-lg font-bold tabular-nums tracking-tight text-foreground">
+                <span className="text-sm font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amount)} {t('sats')}
                 </span>
               ) : null}

src/lib/superchat-ui.ts

@@ -32,11 +32,18 @@ export const superchatLightningAccentClass = 'text-amber-600 dark:text-yellow-40
 
 /**
  * Superchat / zap comment body (thread + profile wall).
- * MarkdownArticle uses `div[role="paragraph"]`, not `<p>`; sizes must not inherit parent `text-sm`.
+ * Left border carries emphasis; body matches normal note text (MarkdownArticle uses `role="paragraph"`).
  */
 export const superchatCommentBodyClass =
   'border-l-[3px] border-amber-700 pl-3.5 dark:border-amber-300 ' +
-  'max-w-none text-[1.3125rem] font-medium leading-snug text-foreground ' +
+  'max-w-none text-base font-normal leading-relaxed text-foreground ' +
-  '[&_[role=paragraph]]:text-[1.3125rem] [&_[role=paragraph]]:font-medium [&_[role=paragraph]]:leading-snug ' +
+  '[&_[role=paragraph]]:text-base [&_[role=paragraph]]:font-normal [&_[role=paragraph]]:leading-relaxed ' +
-  '[&_p]:text-[1.3125rem] [&_p]:font-medium [&_p]:leading-snug ' +
+  '[&_p]:text-base [&_p]:font-normal [&_p]:leading-relaxed ' +
-  'prose-p:text-[1.3125rem] prose-p:font-medium prose-p:leading-snug'
+  'prose-p:text-base prose-p:font-normal prose-p:leading-relaxed'
+
+/** Payment method chip + “Superchat” label row (inline with `text-sm` meta). */
+export const superchatChromeRowClass = 'text-sm'
+
+export const superchatChromePaymentChipClass = 'shrink-0 px-1.5 py-0.5'
+
+export const superchatChromePaymentIconClass = 'size-4'