fix(frontend): mobile horizontal overflow on address/contract pages#124
Conversation
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.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces layout and styling fixes to prevent horizontal overflow and improve responsiveness on mobile viewports. Specifically, it adds min-w-0 to several flex containers (including the main layout container) and applies break-all to long unbroken strings like addresses and transaction hashes. Feedback suggests conditionally applying break-all to the address link in AddressDisplay only when the address is not truncated, preventing awkward wrapping of already shortened addresses.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| 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"> |
There was a problem hiding this comment.
Applying break-all unconditionally to the address link can cause truncated addresses (which are already short, e.g., 0x1234567890...12345678) to wrap awkwardly at arbitrary characters on narrow screens. It is better to apply break-all conditionally only when truncate is false (i.e., when displaying the full address).
| <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")}> |
There was a problem hiding this comment.
Done: break-all now applies only when truncate is false (full-address rendering).
1 participant
Problem
On phones, opening an address page renders the layout wider than the screen (measured 959px on a wallet address page and 665px on a token contract page, against a 390px iPhone viewport), so the browser shows the page overflowed and users must zoom out to fit it.
Root cause
The main content wrapper in
app/layout.tsx(flex-1 lg:ml-64 ...) is a flex item withoutmin-w-0. Flexbox's defaultmin-width: automeans a flex item refuses to shrink below its content's intrinsic width, so any wide<table>or long unbroken hash stretched the entire page instead of scrolling inside its ownoverflow-x-autowrapper. The homepage measures a clean 390px because it has no such wide intrinsic content; every detail page with tables/hashes was affected.Fix
min-w-0on the layout's main flex wrapper (one class; this alone takes the contract page from 665 to 390 and lets everyoverflow-x-autotable actually scroll internally).break-all+min-w-0on the token contract view's remaining unbroken monospace strings (header address, creator address, creation tx hash) so they wrap inside their cards instead of being clipped by the card'soverflow-hidden.Verification
Headless Chromium (Playwright) at 390x844 iPhone profile against a production build:
Screenshots confirm addresses wrap cleanly, tab bar and tables keep internal horizontal scroll, nothing clipped.
Gates: lint 0 errors, 114/114 tests, build green.
Risk
min-w-0on the wrapper changes shrink behavior for all pages; desktop is unaffected (the wrapper was never narrower than its content there), and a mobile sweep of home/address/contract/tx pages shows correct rendering.