fix(vibenet): fix mobile overflow in account demo - #17
Merged
Conversation
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.
Collaborator
🟡 Heimdall Review Status
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On mobile, long hex addresses/hashes in the AA account demo overflowed their cards horizontally (screenshots: the account hero address, and the transaction result row with the Explorer link).
Root cause
ConfigView): the copy button wasw-fit, so it sized to the full 42-char address and overflowed the card — the<code>'struncatenever engaged because the button wasn't width-constrained.AccountDemo): the explorer/basescan + raw-tx rows were a non-wrappingflexwith a non-breaking<code>, so the hash + label ran off-screen.Fix
min-w-0 max-w-full(sotruncateengages); labelshrink-0.flex-wrap+break-allon the code; labelshrink-0.ConfigViewconfig-tx "landed" row, and theAppsViewspending-account copy button.Verification
min-w-0/truncate/flex-wrap/break-allcontainer patterns. Worth a quick manual check at ~390px on the account create → hero and a completed transaction.