Improve mobile-first responsiveness across full project

src/components/LogsOverlay.tsx

@@ -11,7 +11,7 @@ export function LogsOverlay({ open, onOpenChange }: LogsOverlayProps) {
   const { t } = useTranslation()
   return (
     <Dialog open={open} onOpenChange={() => onOpenChange(false)}>
-      <DialogContent className="data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom flex h-screen max-w-screen! flex-col rounded-none border-none">
+      <DialogContent className="data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom flex h-dvh max-h-dvh! max-w-screen! flex-col overflow-hidden rounded-none border-none">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <PageTitle title={t('logs.title')} />

src/components/MainWalletPage.tsx

@@ -67,7 +67,7 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
                 {t('global.loading')}
               </div>
             ) : (
-              <div className="flex items-center text-4xl tracking-wider">
+              <div className="flex items-center text-3xl tracking-wider sm:text-4xl">
                 <Balance
                   onClick={() => toggleDisplayMode()}
                   valueString={String(walletBalanceSummary.calculatedTotalBalanceInSats)}
@@ -76,7 +76,7 @@ export default function MainWalletPage({ walletFileName }: MainWalletPageProps)
               </div>
             )}
           </div>
-          <div className="mt-2 flex w-full justify-center gap-4" data-tour-id="wallet-actions">
+          <div className="mt-2 flex w-full flex-col justify-center gap-4 sm:flex-row" data-tour-id="wallet-actions">
             <Button size="xxl" className="flex-1" variant="default" onClick={() => void navigate(routes.receive)}>
               <DownloadIcon />
               {t('current_wallet.button_deposit')}

src/components/create/CreateStepConfirm.tsx

@@ -118,31 +118,39 @@ export const CreateStepConfirm = ({
 
       <div className="space-y-4">
         <div className="space-y-2">
-          <Field data-invalid={errors.revealSensitiveInfo !== undefined} orientation="horizontal">
+          <Field
+            data-invalid={errors.revealSensitiveInfo !== undefined}
+            orientation="horizontal"
+            className="items-start"
+          >
             <Switch
+              className="mt-0.5 shrink-0"
               id="switch-reveal-seed"
               checked={revealSensitiveInfo}
               onCheckedChange={(checked) =>
                 setValue('revealSensitiveInfo', checked, { shouldValidate: true, shouldTouch: true })
               }
             />
-            <FieldLabel htmlFor="switch-reveal-seed">{t('create_wallet.confirmation_toggle_reveal_info')}</FieldLabel>
+            <FieldLabel htmlFor="switch-reveal-seed" className="min-w-0 flex-1">
+              {t('create_wallet.confirmation_toggle_reveal_info')}
+            </FieldLabel>
           </Field>
           {errors.revealSensitiveInfo?.message && (
             <div className="text-destructive text-xs">{errors.revealSensitiveInfo.message}</div>
           )}
         </div>
 
         <div className="space-y-2">
-          <Field data-invalid={errors.backupConfirmed !== undefined} orientation="horizontal">
+          <Field data-invalid={errors.backupConfirmed !== undefined} orientation="horizontal" className="items-start">
             <Switch
+              className="mt-0.5 shrink-0"
               id="switch-confirm-backup"
               required={true}
               disabled={!touchedFields.revealSensitiveInfo}
               checked={backupConfirmed}
               onCheckedChange={(checked) => setValue('backupConfirmed', checked, { shouldValidate: true })}
             />
-            <FieldLabel htmlFor="switch-confirm-backup">
+            <FieldLabel htmlFor="switch-confirm-backup" className="min-w-0 flex-1">
               {t('create_wallet.confirmation_toggle_info_written_down')}
             </FieldLabel>
           </Field>

src/components/create/CreateStepVerifyMnemonic.tsx

@@ -103,7 +103,7 @@ export const CreateStepVerifyMnemonic = ({ mnemonicPhrase, onVerified, onBack }:
           'border-green-300/50 bg-green-600/5': allSelected && isCorrect,
         })}
       >
-        <div className="grid grid-cols-3 gap-1.5 select-none">
+        <div className="grid grid-cols-2 gap-1.5 select-none sm:grid-cols-3">
           {!isCorrect &&
             mnemonicPhrase.map((_, index) => {
               const word = selectedWords[index]
@@ -112,10 +112,13 @@ export const CreateStepVerifyMnemonic = ({ mnemonicPhrase, onVerified, onBack }:
               return (
                 <div
                   key={index}
-                  className={cn('flex items-center gap-0.5 rounded-md px-0.5 py-1.5 font-mono text-xs transition-all', {
-                    'bg-primary/10 text-primary border-primary/20 border': isFilled,
-                    'border-muted bg-muted/30 border border-dashed': !isFilled,
-                  })}
+                  className={cn(
+                    'flex min-w-0 items-center gap-0.5 rounded-md px-0.5 py-1.5 font-mono text-xs transition-all',
+                    {
+                      'bg-primary/10 text-primary border-primary/20 border': isFilled,
+                      'border-muted bg-muted/30 border border-dashed': !isFilled,
+                    },
+                  )}
                 >
                   <span
                     className={cn('min-w-8 text-right tabular-nums', {
@@ -126,7 +129,7 @@ export const CreateStepVerifyMnemonic = ({ mnemonicPhrase, onVerified, onBack }:
                     {index + 1}.
                   </span>
                   {isFilled ? (
-                    <span>{isHidden ? <MaskedText masked /> : word}</span>
+                    <span className="min-w-0 truncate">{isHidden ? <MaskedText masked /> : word}</span>
                   ) : (
                     <span className="text-muted-foreground/30">···</span>
                   )}
@@ -143,7 +146,7 @@ export const CreateStepVerifyMnemonic = ({ mnemonicPhrase, onVerified, onBack }:
       </div>
 
       {!allSelected && (
-        <div className="grid grid-cols-3 gap-2">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
           {shuffledWords.map((word, index) => {
             const isPicked = pickedIndicesSet.has(index)
             const isWrong = wrongButtonIndex === index
@@ -154,7 +157,7 @@ export const CreateStepVerifyMnemonic = ({ mnemonicPhrase, onVerified, onBack }:
                 size="lg"
                 variant={isWrong ? 'destructive' : isPicked ? 'outline' : 'secondary'}
                 disabled={isPicked || wrongButtonIndex !== undefined}
-                className={cn('font-mono text-sm transition-all', {
+                className={cn('min-w-0 px-2 font-mono text-sm transition-all', {
                   'pointer-events-none opacity-25': isPicked,
                   'animate-shake': isWrong,
                 })}

src/components/create/CreateWalletPage.tsx

@@ -41,7 +41,7 @@ const CreateWalletCard = ({ icon: Icon, title, children }: PropsWithChildren<{ i
         <div className="bg-primary/10 mb-4 flex h-12 w-12 items-center justify-center rounded-full">
           <Icon className="text-primary" />
         </div>
-        <CardTitle className="text-xl font-bold">{title}</CardTitle>
+        <CardTitle className="text-center text-xl font-bold break-words">{title}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-6">{children}</CardContent>
     </Card>

src/components/dev/DevSetupPage.tsx

@@ -43,8 +43,8 @@ export default function DevSetupPage() {
           <h5 className="text-xl font-bold">Jam Instances</h5>
           <div className="flex flex-col gap-2">
             <div>
-              <div className="flex items-center gap-2">
-                <WalletIcon className="h-4 w-4" />
+              <div className="flex flex-wrap items-center gap-2">
+                <WalletIcon className="h-4 w-4 shrink-0" />
                 <span className="font-mono">jm_regtest_joinmarket</span>
                 <Badge>primary · ng native</Badge>
               </div>
@@ -57,9 +57,14 @@ export default function DevSetupPage() {
             </div>
 
             <div>
-              <div className="flex items-center gap-2">
-                <WalletIcon className="h-4 w-4" />
-                <a href={LINK_JM_REGTEST_JOINMARKET2} target="_blank" rel="noopener noreferrer" className="underline">
+              <div className="flex flex-wrap items-center gap-2">
+                <WalletIcon className="h-4 w-4 shrink-0" />
+                <a
+                  href={LINK_JM_REGTEST_JOINMARKET2}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="min-w-0 break-all underline"
+                >
                   jm_regtest_joinmarket2 ({LINK_JM_REGTEST_JOINMARKET2})
                 </a>
                 <Badge>secondary · ng standalone</Badge>
@@ -72,8 +77,8 @@ export default function DevSetupPage() {
             </div>
 
             <div>
-              <div className="flex items-center gap-2">
-                <WalletIcon className="h-4 w-4" />
+              <div className="flex flex-wrap items-center gap-2">
+                <WalletIcon className="h-4 w-4 shrink-0" />
                 <span className="font-mono">jm_regtest_joinmarket3</span>
                 <Badge>tertiary · clientserver native</Badge>
               </div>
@@ -85,9 +90,14 @@ export default function DevSetupPage() {
             </div>
 
             <div>
-              <div className="flex items-center gap-2">
-                <WalletIcon className="h-4 w-4" />
-                <a href={LINK_JM_REGTEST_JOINMARKET4} target="_blank" rel="noopener noreferrer" className="underline">
+              <div className="flex flex-wrap items-center gap-2">
+                <WalletIcon className="h-4 w-4 shrink-0" />
+                <a
+                  href={LINK_JM_REGTEST_JOINMARKET4}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="min-w-0 break-all underline"
+                >
                   jm_regtest_joinmarket4 ({LINK_JM_REGTEST_JOINMARKET4})
                 </a>
                 <Badge>quaternary · clientserver standalone</Badge>
@@ -115,10 +125,15 @@ export default function DevSetupPage() {
           <h5 className="text-xl font-bold">Block Explorer</h5>
           <div>
             {' '}
-            <div className="flex items-center gap-2">
-              <BlocksIcon className="h-4 w-4" />
+            <div className="flex flex-wrap items-center gap-2">
+              <BlocksIcon className="h-4 w-4 shrink-0" />
 
-              <a href={LINK_JM_REGTEST_EXPLORER} target="_blank" rel="noopener noreferrer" className="underline">
+              <a
+                href={LINK_JM_REGTEST_EXPLORER}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="min-w-0 break-all underline"
+              >
                 jm_regtest_explorer ({LINK_JM_REGTEST_EXPLORER})
               </a>
             </div>
@@ -133,16 +148,23 @@ export default function DevSetupPage() {
             </div>
           </div>
           <div>
-            <div className="flex items-center gap-2">
-              <TerminalIcon className="h-4 w-4" />
+            <div className="flex flex-wrap items-center gap-2">
+              <TerminalIcon className="h-4 w-4 shrink-0" />
 
-              <a href={LINK_JM_REGTEST_RPC_TERMINAL} target="_blank" rel="noopener noreferrer" className="underline">
+              <a
+                href={LINK_JM_REGTEST_RPC_TERMINAL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="min-w-0 break-all underline"
+              >
                 Regtest RPC Terminal ({LINK_JM_REGTEST_RPC_TERMINAL})
               </a>
             </div>
             <div className="my-2 ms-5">
               Mine a block, e.g.:
-              <pre>generatetoaddress 1 bcrt1qrnz0thqslhxu86th069r9j6y7ldkgs2tzgf5wx</pre>
+              <pre className="max-w-full overflow-x-auto">
+                generatetoaddress 1 bcrt1qrnz0thqslhxu86th069r9j6y7ldkgs2tzgf5wx
+              </pre>
             </div>
           </div>
         </div>

src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialog.tsx

@@ -99,7 +99,7 @@ export function CreateFidelityBondDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange} {...dialogProps}>
-      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
+      <DialogContent className="max-h-[90dvh] max-w-2xl overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-2xl">{t('earn.fidelity_bond.create_fidelity_bond.title')}</DialogTitle>
           <DialogDescription>{t('earn.fidelity_bond.subtitle')}</DialogDescription>

src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx

@@ -88,7 +88,7 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="lockdate-month" className="text-sm font-medium">
                 {t('earn.fidelity_bond.select_date.form_label_month')}
@@ -186,8 +186,8 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
                   )}
                   onClick={() => setSelectedJarIndex(jar.jarIndex)}
                 >
-                  <CardContent className="flex items-center justify-between p-4">
-                    <div className="flex items-center gap-4">
+                  <CardContent className="flex flex-col items-start justify-between gap-3 p-4 sm:flex-row sm:items-center">
+                    <div className="flex min-w-0 items-center gap-4">
                       <div
                         className="h-10 w-10 rounded-full shadow-sm"
                         style={{ backgroundColor: jar.color, opacity: 0.8 }}
@@ -201,7 +201,7 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
                         </p>
                       </div>
                     </div>
-                    <div className="text-right">
+                    <div className="shrink-0 text-left sm:text-right">
                       <p className="font-mono font-semibold">
                         {formatSats(jar.balanceSummary.calculatedAvailableBalanceInSats)}
                       </p>
@@ -324,9 +324,11 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
 
           {selectedUtxos.length > 0 && (
             <div className="border-t pt-4">
-              <div className="bg-muted/50 flex items-center justify-between rounded-lg p-3">
-                <span className="font-medium">{t('earn.fidelity_bond.select_utxos.label_total_selected')}</span>
-                <span className="font-mono text-lg font-bold">{formatSats(totalAmount)}</span>
+              <div className="bg-muted/50 flex flex-wrap items-center justify-between gap-2 rounded-lg p-3">
+                <span className="min-w-0 font-medium break-words">
+                  {t('earn.fidelity_bond.select_utxos.label_total_selected')}
+                </span>
+                <span className="shrink-0 font-mono text-lg font-bold">{formatSats(totalAmount)}</span>
               </div>
             </div>
           )}
@@ -403,7 +405,7 @@ export function CreateFidelityBondDialogSteps({ wizard }: CreateFidelityBondDial
       return (
         <div className="space-y-6">
           <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <div className="bg-muted/50 rounded-lg p-4">
                 <p className="text-muted-foreground mb-1 text-xs">
                   {t('earn.fidelity_bond.review_inputs.label_lock_date')}

src/components/earn/EarnForm.tsx

@@ -90,8 +90,8 @@ const OfferTypeInput = (props: React.ComponentProps<typeof RadioGroup>) => {
   const id = useId()
 
   return (
-    <RadioGroup className="flex items-center justify-center" {...props}>
-      <div className="border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:ring-primary/20 relative flex w-full max-w-50 cursor-pointer flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none has-data-[state=checked]:ring-[2px]">
+    <RadioGroup className="flex flex-col items-stretch justify-center gap-2 sm:flex-row sm:items-center" {...props}>
+      <div className="border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:ring-primary/20 relative flex w-full cursor-pointer flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none has-data-[state=checked]:ring-[2px] sm:max-w-50">
         <RadioGroupItem
           value={OFFERTYPE_ABS}
           id={`${id}-sw0absoffer`}
@@ -104,7 +104,7 @@ const OfferTypeInput = (props: React.ComponentProps<typeof RadioGroup>) => {
           </Label>
         </div>
       </div>
-      <div className="border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:ring-primary/20 relative flex w-full max-w-50 flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none has-data-[state=checked]:ring-[2px]">
+      <div className="border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:ring-primary/20 relative flex w-full flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none has-data-[state=checked]:ring-[2px] sm:max-w-50">
         <RadioGroupItem
           value={OFFERTYPE_REL}
           id={`${id}-sw0reloffer`}

src/components/earn/EarnPage.tsx

@@ -358,7 +358,7 @@ export const EarnPage = ({ walletFileName }: EarnPageProps) => {
               return (
                 <FidelityBondCard value={it} key={it.utxo}>
                   {actionsEnabled && (
-                    <div className="flex w-full flex-row gap-2">
+                    <div className="flex w-full flex-col gap-2 sm:flex-row">
                       <Button variant="secondary" className="flex-1" onClick={() => setMoveToJarUtxo(it)}>
                         <UnlockIcon />
                         {t('earn.fidelity_bond.existing.button_spend')}

src/components/earn/FidelityBondCard.tsx

@@ -42,7 +42,7 @@ export function FidelityBondCard({ value, children }: PropsWithChildren<Fidelity
             t('earn.fidelity_bond.existing.title_active')
           )}
         </CardTitle>
-        <CardDescription className="text-xs">
+        <CardDescription className="min-w-0 text-xs break-all">
           <Tooltip>
             <TooltipTrigger asChild>
               <code>{value.path}</code>
@@ -54,29 +54,29 @@ export function FidelityBondCard({ value, children }: PropsWithChildren<Fidelity
           </Tooltip>
         </CardDescription>
         <CardAction>
-          <div className="flex items-center gap-2">
-            <CoinsIcon />
-            <div>
+          <div className="flex min-w-0 items-center gap-2">
+            <CoinsIcon className="shrink-0" />
+            <div className="min-w-0">
               <Balance valueString={String(value.value)} />
             </div>
           </div>
         </CardAction>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <div className="flex items-center gap-4">
-          <ClockIcon />
-          <div className="flex flex-col">
+        <div className="flex items-start gap-4">
+          <ClockIcon className="mt-0.5 shrink-0" />
+          <div className="min-w-0 flex-1">
             <span className="text-muted-foreground text-sm font-semibold">
               {t(`earn.fidelity_bond.existing.${isExpired ? 'label_expired_on' : 'label_locked_until'}`)}
             </span>
-            <span className="text-md font-mono">
+            <span className="text-md block font-mono break-words">
               {value.locktime} ({humanReadableLockDuration})
             </span>
           </div>
         </div>
-        <div className="flex items-center gap-4">
-          <CopyIcon />
-          <div className="flex flex-col">
+        <div className="flex items-start gap-4">
+          <CopyIcon className="mt-0.5 shrink-0" />
+          <div className="min-w-0 flex-1">
             <span className="text-muted-foreground text-sm font-semibold">
               {t('earn.fidelity_bond.existing.label_address')}
             </span>