From 1c48ea2e71c77ef371a4a816f50b0ce4c90fd19b Mon Sep 17 00:00:00 2001
From: moscowchill <gasgeverij@proton.me>
Date: Thu, 11 Jun 2026 10:43:07 +0200
Subject: [PATCH 1/2] fix(frontend): mobile horizontal overflow on
 address/contract pages

On phones, address pages forced the layout viewport to 665-959px
against a 390px screen, so the browser rendered everything overflowed
and users had to zoom out to fit the page.

Root cause: the main content wrapper in layout.tsx is a flex item
without min-w-0. Flexbox min-width:auto means it refuses to shrink
below its content's intrinsic width, so any wide table or long
unbroken hash stretched the whole page instead of scrolling inside its
own overflow-x-auto container. min-w-0 restores the intended behavior.

Also wrap the remaining unbroken monospace strings on the token
contract view (header address, creator, creation tx hash) with
break-all + min-w-0 so they wrap inside their cards instead of being
clipped by the card's overflow-hidden.

Verified with headless Chromium at 390x844 (iPhone profile):
wallet address page 959 -> 390, token contract page 665 -> 390,
tx page 390. Screenshots confirm clean rendering, addresses wrap,
tables keep their internal horizontal scroll.
---
 .../app/address/[query]/token-contract-view.tsx      | 12 ++++++------
 ExplorerFrontend/app/layout.tsx                      |  7 ++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/ExplorerFrontend/app/address/[query]/token-contract-view.tsx b/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
index c7cf527..1b3f692 100644
--- a/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
+++ b/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
@@ -98,7 +98,7 @@ const AddressDisplay = ({ address, truncate = false }: { address: string; trunca
 
     const display = truncate ? `${address.slice(0, 10)}...${address.slice(-8)}` : address;
     return (
-        <Link href={`/address/${address}`} className="text-accent hover:text-accent-hover font-mono text-xs md:text-sm">
+        <Link href={`/address/${address}`} className="text-accent hover:text-accent-hover font-mono text-xs md:text-sm break-all">
             {display}
         </Link>
     );
@@ -366,7 +366,7 @@ export default function TokenContractView({ address, contractData, handlerUrl }:
                                     {symbol.charAt(0)}
                                 </div>
                             )}
-                            <div>
+                            <div className="min-w-0">
                                 <div className="flex items-center gap-2 flex-wrap">
                                     <h1 className="text-xl md:text-2xl font-bold text-white">{name}</h1>
                                     {rawSymbol && (
@@ -391,8 +391,8 @@ export default function TokenContractView({ address, contractData, handlerUrl }:
                                         {metaDescription}
                                     </p>
                                 )}
-                                <div className="flex items-center gap-2 mt-1">
-                                    <span className="text-xs md:text-sm text-gray-400 font-mono">{address}</span>
+                                <div className="flex items-center gap-2 mt-1 min-w-0">
+                                    <span className="text-xs md:text-sm text-gray-400 font-mono break-all">{address}</span>
                                     <CopyButton value={address} label="Copy address" />
                                     <QRCodeButton address={address} />
                                 </div>
@@ -535,10 +535,10 @@ export default function TokenContractView({ address, contractData, handlerUrl }:
                             <div className="bg-black/20 rounded-lg p-4 space-y-3">
                                 <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
                                     <div className="text-xs md:text-sm text-gray-400">Transaction Hash</div>
-                                    <div className="flex items-center gap-2">
+                                    <div className="flex items-center gap-2 min-w-0">
                                         <Link
                                             href={`/tx/${creationTxHash}`}
-                                            className="text-accent hover:text-accent-hover font-mono text-xs md:text-sm"
+                                            className="text-accent hover:text-accent-hover font-mono text-xs md:text-sm break-all"
                                         >
                                             {creationTxHash || 'Unknown'}
                                         </Link>
diff --git a/ExplorerFrontend/app/layout.tsx b/ExplorerFrontend/app/layout.tsx
index 6528838..b41fac4 100644
--- a/ExplorerFrontend/app/layout.tsx
+++ b/ExplorerFrontend/app/layout.tsx
@@ -125,7 +125,12 @@ export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
           </a>
           <div className="flex min-h-screen">
             <Sidebar />
-            <div className="flex-1 lg:ml-64 min-h-screen relative transition-all duration-300 mt-[72px] lg:mt-4 flex flex-col">
+            {/* min-w-0 is load-bearing: without it this flex item refuses to
+                shrink below its content's intrinsic width (flexbox min-width:
+                auto), so any wide table or long unbroken hash stretches the
+                whole page beyond the mobile viewport instead of scrolling
+                inside its own overflow-x-auto container. */}
+            <div className="flex-1 min-w-0 lg:ml-64 min-h-screen relative transition-all duration-300 mt-[72px] lg:mt-4 flex flex-col">
               <main id="main-content" className="flex-1 relative">
                 {children}
               </main>

From 5ac4cad9231c5e083db694972829daf26e4a185a Mon Sep 17 00:00:00 2001
From: moscowchill <gasgeverij@proton.me>
Date: Thu, 11 Jun 2026 10:47:16 +0200
Subject: [PATCH 2/2] fix(frontend): only break-all full addresses, not
 truncated ones (review follow-up)

---
 ExplorerFrontend/app/address/[query]/token-contract-view.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ExplorerFrontend/app/address/[query]/token-contract-view.tsx b/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
index 1b3f692..47fe93b 100644
--- a/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
+++ b/ExplorerFrontend/app/address/[query]/token-contract-view.tsx
@@ -98,7 +98,7 @@ const AddressDisplay = ({ address, truncate = false }: { address: string; trunca
 
     const display = truncate ? `${address.slice(0, 10)}...${address.slice(-8)}` : address;
     return (
-        <Link href={`/address/${address}`} className="text-accent hover:text-accent-hover font-mono text-xs md:text-sm break-all">
+        <Link href={`/address/${address}`} className={`text-accent hover:text-accent-hover font-mono text-xs md:text-sm${truncate ? '' : ' break-all'}`}>
             {display}
         </Link>
     );