From 3f41353d4c88a4965c036ac7d1f120a1ae65e203 Mon Sep 17 00:00:00 2001
From: Montana Wong <montanawong@gmail.com>
Date: Thu, 23 Jul 2026 12:59:13 -0400
Subject: [PATCH] fix(vibenet): fix mobile overflow in account demo

Long hex addresses/hashes overflowed their cards on narrow screens:

- account hero address: the copy button was w-fit, so it sized to the full
  address and defeated the code's truncate. Make it min-w-0/max-w-full so
  truncate engages; label shrink-0.
- tx ResultPanel (explorer/basescan + raw-tx rows): flex-wrap + break-all so
  the hash + label wrap instead of overflowing.
- ConfigView config-tx 'landed' row and AppsView spending-account copy button:
  same treatment (wrap/break/shrink-0) for consistency.

typecheck/lint/build pass.
---
 app/vibenet/demos/account/AccountDemo.tsx           | 12 ++++++------
 app/vibenet/demos/account/components/AppsView.tsx   |  6 +++---
 app/vibenet/demos/account/components/ConfigView.tsx | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/vibenet/demos/account/AccountDemo.tsx b/app/vibenet/demos/account/AccountDemo.tsx
index 0618680..00175f4 100644
--- a/app/vibenet/demos/account/AccountDemo.tsx
+++ b/app/vibenet/demos/account/AccountDemo.tsx
@@ -3718,10 +3718,10 @@ function ResultPanel({ result, chain, copied, copy }: ResultPanelProps) {
           href={native ? `${VIBENET_EXPLORER_PATH}/tx/${result.txHash}` : basescanTx(result.txHash)}
           target={native ? undefined : '_blank'}
           rel="noopener"
-          className="flex items-center gap-2 font-mono text-[13px] text-base-blue hover:underline dark:text-bds-blue-20"
+          className="flex flex-wrap items-center gap-2 font-mono text-[13px] text-base-blue hover:underline dark:text-bds-blue-20"
         >
-          <code>{short(result.txHash, 16, 12)}</code>
-          <span className="text-[11px] uppercase tracking-[0.4px]">
+          <code className="break-all">{short(result.txHash, 16, 12)}</code>
+          <span className="shrink-0 text-[11px] uppercase tracking-[0.4px]">
             {native ? 'Explorer ↗' : 'Basescan ↗'}
           </span>
         </a>
@@ -3729,10 +3729,10 @@ function ResultPanel({ result, chain, copied, copy }: ResultPanelProps) {
         <button
           type="button"
           onClick={() => copy(result.serialized as string, 'res')}
-          className="flex items-center gap-2 text-left font-mono text-[13px] text-base-blue dark:text-bds-blue-20"
+          className="flex flex-wrap items-center gap-2 text-left font-mono text-[13px] text-base-blue dark:text-bds-blue-20"
         >
-          <code>{short(result.serialized, 16, 12)}</code>
-          <span className="text-[11px] uppercase tracking-[0.4px]">
+          <code className="break-all">{short(result.serialized, 16, 12)}</code>
+          <span className="shrink-0 text-[11px] uppercase tracking-[0.4px]">
             {copied === 'res' ? 'Copied' : 'copy raw tx'}
           </span>
         </button>
diff --git a/app/vibenet/demos/account/components/AppsView.tsx b/app/vibenet/demos/account/components/AppsView.tsx
index 87c8bc2..ac1b609 100644
--- a/app/vibenet/demos/account/components/AppsView.tsx
+++ b/app/vibenet/demos/account/components/AppsView.tsx
@@ -173,12 +173,12 @@ function SpendingAccountLive({
         type="button"
         onClick={() => copy(sub.address, 'vault')}
         title="Copy account address"
-        className="flex w-fit items-center gap-2 text-left"
+        className="flex min-w-0 max-w-full items-center gap-2 text-left"
       >
-        <code className="font-mono text-[13px] text-base-blue dark:text-bds-blue-20">
+        <code className="min-w-0 truncate font-mono text-[13px] text-base-blue dark:text-bds-blue-20">
           {short(sub.address)}
         </code>
-        <span className="text-[11px] uppercase tracking-[0.4px] text-bds-gray-50">
+        <span className="shrink-0 text-[11px] uppercase tracking-[0.4px] text-bds-gray-50">
           {copied === 'vault' ? 'copied!' : 'tap to copy'}
         </span>
       </button>
diff --git a/app/vibenet/demos/account/components/ConfigView.tsx b/app/vibenet/demos/account/components/ConfigView.tsx
index 7e6a4bb..9bd9e81 100644
--- a/app/vibenet/demos/account/components/ConfigView.tsx
+++ b/app/vibenet/demos/account/components/ConfigView.tsx
@@ -148,12 +148,12 @@ export function ConfigView(p: ConfigViewProps) {
             type="button"
             onClick={() => p.copy(acct.address, 'cfg')}
             title="Copy address"
-            className="flex w-fit items-center gap-2 text-left"
+            className="flex min-w-0 max-w-full items-center gap-2 text-left"
           >
-            <code className="truncate font-mono text-[13px] text-base-blue dark:text-bds-blue-20">
+            <code className="min-w-0 truncate font-mono text-[13px] text-base-blue dark:text-bds-blue-20">
               {acct.address}
             </code>
-            <span className="text-[11px] uppercase tracking-[0.4px] text-bds-gray-50">
+            <span className="shrink-0 text-[11px] uppercase tracking-[0.4px] text-bds-gray-50">
               {p.copied === 'cfg' ? 'Copied' : 'copy'}
             </span>
           </button>
@@ -467,10 +467,10 @@ function OwnersTab({ p }: { p: ConfigViewProps }) {
           {p.configTx && TX_HASH_RE.test(p.configTx.hash) ? (
             <Link
               href={`${VIBENET_EXPLORER_PATH}/tx/${p.configTx.hash}`}
-              className="flex items-center gap-2 font-mono text-[12px] text-base-blue hover:underline dark:text-bds-blue-20"
+              className="flex flex-wrap items-center gap-2 font-mono text-[12px] text-base-blue hover:underline dark:text-bds-blue-20"
             >
               <Badge tone="ok">✓ {p.configTx.label} landed</Badge>
-              <code>{short(p.configTx.hash, 14, 12)}</code>
+              <code className="break-all">{short(p.configTx.hash, 14, 12)}</code>
             </Link>
           ) : null}
         </div>