code/cl8y-dex-terraclassic

Fork 0

W2-C2: "COSMOSTATION" label overflows row in connect modal — text crammed into adjacent badges #160

New issue

Closed

opened 2026-05-12 12:44:01 +00:00 by totdking · 15 comments

totdking commented

2026-05-12 12:44:01 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-12 12:54:58 +00:00

(Migrated from gitlab.com)

Issue Summary

In the Connect Wallet modal, the COSMOSTATION row label overflows its allocated space and visually cramps into the EXTENSION badge next to it. The wallet name is longer than the row layout accounts for, causing the label and badge to overlap or sit flush with no readable separation.

Reproduction Steps

Open the app and click Connect Wallet in the header
Locate the COSMOSTATION row in the wallet list
Observe the row — the wallet name runs into the EXTENSION badge with no visible spacing or truncation

Expected Behavior

All wallet name labels should have consistent spacing from adjacent badges regardless of name length. Either the label should truncate with an ellipsis tooltip, or the row layout should accommodate longer names without crowding.

Actual Behavior

"COSMOSTATION" is long enough to visually collide with the "EXTENSION" badge in the same row. The name and badge have no readable separation, making the row harder to scan than the others (STATION, KEPLR, LEAP, LUNCDASH, GALAXY STATION).

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	~375px mobile modal
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev`

Screenshots

See attached screenshot of the Connect Wallet modal showing COSMOSTATION label crammed against the EXTENSION badge with no visible spacing.

{width=623 height=600}

Severity / Impact

P3 Nit. No functionality is broken and the Install button is still tappable. The cramming is a layout oversight for long wallet names — the fix is a min-width or truncation rule on the label column. Found under W2-C2 (Wallet selection UX — Display dimension).

cc: @PlasticDigits

### Issue Summary In the Connect Wallet modal, the **COSMOSTATION** row label overflows its allocated space and visually cramps into the `EXTENSION` badge next to it. The wallet name is longer than the row layout accounts for, causing the label and badge to overlap or sit flush with no readable separation. --- ### Reproduction Steps 1. Open the app and click **Connect Wallet** in the header 2. Locate the **COSMOSTATION** row in the wallet list 3. Observe the row — the wallet name runs into the `EXTENSION` badge with no visible spacing or truncation --- ### Expected Behavior All wallet name labels should have consistent spacing from adjacent badges regardless of name length. Either the label should truncate with an ellipsis tooltip, or the row layout should accommodate longer names without crowding. --- ### Actual Behavior "COSMOSTATION" is long enough to visually collide with the "EXTENSION" badge in the same row. The name and badge have no readable separation, making the row harder to scan than the others (STATION, KEPLR, LEAP, LUNCDASH, GALAXY STATION). --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | \~375px mobile modal | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | --- ### Screenshots > See attached screenshot of the Connect Wallet modal showing COSMOSTATION label crammed against the EXTENSION badge with no visible spacing. ![image.png](/uploads/3658e731a5b2b85a36b5a32942c533e0/image.png){width=623 height=600} --- ### Severity / Impact **P3 Nit.** No functionality is broken and the Install button is still tappable. The cramming is a layout oversight for long wallet names — the fix is a min-width or truncation rule on the label column. Found under **W2-C2** (Wallet selection UX — Display dimension). cc: @PlasticDigits

PlasticDigits commented

2026-05-13 05:19:14 +00:00

(Migrated from gitlab.com)

mentioned in commit e0453943d8

mentioned in commit e0453943d83a9d9160c78a16e92b258094b6a6c9

PlasticDigits commented

2026-05-13 05:20:18 +00:00

(Migrated from gitlab.com)

Update (implementation on `main`)

What changed

Connect Wallet modal: Removed the redundant Not installed pill on extension rows. Missing extensions are still obvious from the subdued row styling and the Install link (same as before). This frees horizontal space so long labels (e.g. COSMOSTATION) sit more comfortably next to the Extension pill (!878).
Layout: Wallet name column now uses `min-w-0`, `flex-1`, `truncate`, and `title={full name}` so long names ellipsize instead of crowding badges.
Docs / agent playbooks: `docs/frontend.md` § Connect modal invariants updated; new `skills/AGENTS_FRONTEND_WALLET_CONNECT_MODAL.md` cross-linked from `skills/AGENTS_BUNDLE_DEV_WALLET.md` and the frontend guide.
Tests: New `WalletModal.test.tsx` (Vitest) asserts no Not installed text and that Ready only appears when the extension is detected.
Follow-up: Per product polish, wallet row images / icons are still desired — not part of this change.

Verification checklist (for QA)

Open Connect Wallet on a ~375px (or similar) viewport.
With no browser extension installed: each extension row shows Extension + Install; confirm there is no Not installed pill.
With extension(s) installed: matching row(s) show Extension + Ready; Install hidden for that wallet.
COSMOSTATION (and other long names): label does not overlap the Extension badge; truncated text shows ellipsis; hover shows full name via native tooltip.
WalletConnect rows (LuncDash, Galaxy Station) unchanged (no extension install chrome).
Run frontend unit tests: `cd frontend-dapp && npx vitest run src/components/wallet/tests/WalletModal.test.tsx`.

@totdking Could you verify on your side when you have a moment? Leaving the issue open until you confirm.

Note: Wallet list images for each wallet remain a separate follow-up (asset + design pass).

## Update (implementation on \`main\`) ### What changed - **Connect Wallet modal:** Removed the redundant **Not installed** pill on extension rows. Missing extensions are still obvious from the subdued row styling and the **Install** link (same as before). This frees horizontal space so long labels (e.g. **COSMOSTATION**) sit more comfortably next to the **Extension** pill ([!878](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/160)). - **Layout:** Wallet name column now uses **\`min-w-0\`**, **\`flex-1\`**, **\`truncate\`**, and **\`title={full name}\`** so long names ellipsize instead of crowding badges. - **Docs / agent playbooks:** \`docs/frontend.md\` § Connect modal invariants updated; new \`skills/AGENTS_FRONTEND_WALLET_CONNECT_MODAL.md\` cross-linked from \`skills/AGENTS_BUNDLE_DEV_WALLET.md\` and the frontend guide. - **Tests:** New \`WalletModal.test.tsx\` (Vitest) asserts no **Not installed** text and that **Ready** only appears when the extension is detected. - **Follow-up:** Per product polish, **wallet row images / icons** are still desired — not part of this change. ### Verification checklist (for QA) - [ ] Open **Connect Wallet** on a **~375px** (or similar) viewport. - [ ] With **no** browser extension installed: each extension row shows **Extension** + **Install**; confirm there is **no** **Not installed** pill. - [ ] With extension(s) installed: matching row(s) show **Extension** + **Ready**; **Install** hidden for that wallet. - [ ] **COSMOSTATION** (and other long names): label does not overlap the **Extension** badge; truncated text shows ellipsis; hover shows full name via native tooltip. - [ ] **WalletConnect** rows (**LuncDash**, **Galaxy Station**) unchanged (no extension install chrome). - [ ] Run frontend unit tests: \`cd frontend-dapp && npx vitest run src/components/wallet/__tests__/WalletModal.test.tsx\`. @totdking Could you verify on your side when you have a moment? Leaving the issue **open** until you confirm. **Note:** Wallet list **images** for each wallet remain a **separate follow-up** (asset + design pass).

PlasticDigits commented

2026-05-13 05:24:27 +00:00

(Migrated from gitlab.com)

mentioned in commit 0b801ba0dd

mentioned in commit 0b801ba0dd15148c2e56afe6307e2b73fa550375

PlasticDigits commented

2026-05-13 05:25:01 +00:00

(Migrated from gitlab.com)

mentioned in issue #159

PlasticDigits commented

2026-05-27 05:16:51 +00:00

(Migrated from gitlab.com)

Verified and closed (agent QA — 2026-05-27)

Fix already on main (WalletModal layout + removal of redundant Not installed pill). Full verification against the issue checklist:

Verification checklist

Connect Wallet at ~375px viewport — modal opens; layout readable on mobile.
No extensions installed: extension rows show Extension + Install only; no Not installed pill.
Extension detected (Ready): covered by WalletModal.test.tsx — Ready appears only when snapshot reports detection; Install hidden for that wallet.
COSMOSTATION / long names: label truncates with ellipsis (COSMOST…), text-overflow: ellipsis, title="Cosmostation" for native tooltip; no overlap with Extension badge.
WalletConnect rows (LuncDash, Galaxy Station): WalletConnect badge only; no extension install chrome.
Unit tests: npx vitest run src/components/wallet/__tests__/WalletModal.test.tsx — 2/2 passed.

Infra used

LocalTerra healthy, host Postgres :5432, indexer :3001, frontend :3000.

Optional / follow-up

Wallet row icons/images remain out of scope (noted in prior comment).

No additional code changes required; closing.

## Verified and closed (agent QA — 2026-05-27) Fix already on `main` (WalletModal layout + removal of redundant **Not installed** pill). Full verification against the issue checklist: ### Verification checklist - [x] **Connect Wallet** at ~375px viewport — modal opens; layout readable on mobile. - [x] **No extensions installed:** extension rows show **Extension** + **Install** only; **no Not installed** pill. - [x] **Extension detected (Ready):** covered by `WalletModal.test.tsx` — **Ready** appears only when snapshot reports detection; **Install** hidden for that wallet. - [x] **COSMOSTATION / long names:** label truncates with ellipsis (`COSMOST…`), `text-overflow: ellipsis`, `title="Cosmostation"` for native tooltip; **no overlap** with **Extension** badge. - [x] **WalletConnect rows** (LuncDash, Galaxy Station): **WalletConnect** badge only; no extension install chrome. - [x] **Unit tests:** `npx vitest run src/components/wallet/__tests__/WalletModal.test.tsx` — 2/2 passed. ### Infra used LocalTerra healthy, host Postgres `:5432`, indexer `:3001`, frontend `:3000`. ### Optional / follow-up Wallet row **icons/images** remain out of scope (noted in prior comment). No additional code changes required; closing.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 05:16:52 +00:00

PlasticDigits commented

2026-06-07 12:14:12 +00:00

(Migrated from gitlab.com)

mentioned in issue #337