wallet view: addresses wrap and break the layout when a wallet has multiple addresses #380

New Issue

clawbot · 2026-08-30T04:20:09+02:00

clawbot commented

2026-08-30 04:20:09 +02:00

sneak, 2026-08-30: the wallet view has weird address wrapping when a wallet has multiple addresses. "addresses should never wrap in the common views. this doesn't mean to just change the css, but update the layout itself so the untruncated addresses are shown in full and don't mess up the layout."

Requirements:

Full, untruncated addresses displayed in all common views that list addresses.
An address never wraps mid-string, and long addresses do not distort the surrounding layout.
Restructure the layout to make room (e.g. address on its own full-width row) rather than papering over with CSS truncation/ellipsis/shrinking.

Done: a wallet with multiple addresses renders every address in full on one line each, layout intact at the extension's normal viewport sizes; covers every common view that shows an address.

sneak, 2026-08-30: the wallet view has weird address wrapping when a wallet has multiple addresses. "addresses should never wrap in the common views. this doesn't mean to just change the css, but update the layout itself so the untruncated addresses are shown in full and don't mess up the layout." Requirements: - Full, untruncated addresses displayed in all common views that list addresses. - An address never wraps mid-string, and long addresses do not distort the surrounding layout. - Restructure the layout to make room (e.g. address on its own full-width row) rather than papering over with CSS truncation/ellipsis/shrinking. Done: a wallet with multiple addresses renders every address in full on one line each, layout intact at the extension's normal viewport sizes; covers every common view that shows an address.

clawbot commented

2026-08-30 04:26:38 +02:00

Plan:

renderAddressHtml() in src/popup/views/helpers.js is the single renderer behind every common view that shows an address. Restructure what it emits: an identity strip (colour dot, wallet title, ENS name, explorer link) on its own line, then the address alone on a full-width row that cannot wrap and shares the row with nothing.
Wallet list rows (home.js): [info]/[x] move up beside the "Address N" label, which is currently an empty row, so the address gets the whole row width instead of competing with the buttons.
Transaction rows (home.js, addressDetail.js, addressToken.js): the counterparty is truncateMiddle()d today only to fit beside the amount. Same treatment - own row, shown in full. truncateMiddle() itself stays in place with its 10-character cap, per RULES.md.
One .address-line rule in main.css: white-space: nowrap plus overflow-x: auto, so if font metrics ever change the address degrades to a scrollable row rather than a clipped one.
Verified in a real Chromium through the repo's existing Playwright harness, asserting no address element overflows its container in any view; kept as a standing e2e check.

Plan: - `renderAddressHtml()` in `src/popup/views/helpers.js` is the single renderer behind every common view that shows an address. Restructure what it emits: an identity strip (colour dot, wallet title, ENS name, explorer link) on its own line, then the address alone on a full-width row that cannot wrap and shares the row with nothing. - Wallet list rows (`home.js`): `[info]`/`[x]` move up beside the "Address N" label, which is currently an empty row, so the address gets the whole row width instead of competing with the buttons. - Transaction rows (`home.js`, `addressDetail.js`, `addressToken.js`): the counterparty is `truncateMiddle()`d today only to fit beside the amount. Same treatment - own row, shown in full. `truncateMiddle()` itself stays in place with its 10-character cap, per RULES.md. - One `.address-line` rule in `main.css`: `white-space: nowrap` plus `overflow-x: auto`, so if font metrics ever change the address degrades to a scrollable row rather than a clipped one. - Verified in a real Chromium through the repo's existing Playwright harness, asserting no address element overflows its container in any view; kept as a standing e2e check.

clawbot referenced this issue from a commit

2026-08-30 04:51:58 +02:00

fix: give every address a row of its own, so none wraps or is shortened (closes #380)

clawbot referenced a pull request that will close this issue

2026-08-30 04:52:17 +02:00

fix: give every address a row of its own, so none wraps or is shortened (closes #380) #381

clawbot commented

2026-08-30 04:52:29 +02:00

Built: #381.

Every address in the popup now sits alone on a full-width row that cannot wrap, with the colour dot, wallet title, ENS name and explorer link moved onto a strip above it. The wallet list's [info]/[x] controls moved up to the "Address N" line, which was empty to their left, and the transaction rows carry the counterparty's whole address instead of a truncateMiddle()d one. truncateMiddle() and its 10-character cap stay, per RULES.md; its 32-character caller floor moved into renderAddressHtml() now that no caller passes maxLen.

Disclosure: .am-address is a custom CSS class, which README's Tailwind bullet says the repo avoids; I judged the never-wrap rule an invariant rather than styling and amended that bullet to say so, next to the existing .copy-flash-* classes. Disclosure: I did not advance TODO.md's Next Step, because the item there is the pre-1.0 security review, not this issue.

Built: [#381](https://git.eeqj.de/sneak/AutistMask/pulls/381). Every address in the popup now sits alone on a full-width row that cannot wrap, with the colour dot, wallet title, ENS name and explorer link moved onto a strip above it. The wallet list's `[info]`/`[x]` controls moved up to the "Address N" line, which was empty to their left, and the transaction rows carry the counterparty's whole address instead of a `truncateMiddle()`d one. `truncateMiddle()` and its 10-character cap stay, per RULES.md; its 32-character caller floor moved into `renderAddressHtml()` now that no caller passes `maxLen`. Disclosure: `.am-address` is a custom CSS class, which README's Tailwind bullet says the repo avoids; I judged the never-wrap rule an invariant rather than styling and amended that bullet to say so, next to the existing `.copy-flash-*` classes. Disclosure: I did not advance `TODO.md`'s Next Step, because the item there is the pre-1.0 security review, not this issue.

clawbot closed this issue

2026-08-30 05:25:00 +02:00

clawbot referenced this issue from a commit

2026-08-30 05:25:02 +02:00

fix: give every address a row of its own, so none wraps or is shortened (closes #380) (#381)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sneak/AutistMask#380