ADAMANT Explorer: mobile and small-screen UX overhaul

[metalisk]

ADAMANT Explorer completed a focused pass over its mobile and small-screen behavior so dense blockchain data — tables, addresses, monitors, the peer map, and the network graph — stays readable and usable on phones and narrow viewports after the Vue redesign.

Merged into dev in Adamant-im/adamant-explorer#42, closing Adamant-im/adamant-explorer#40 (display and mobile UX) and Adamant-im/adamant-explorer#41 (WebSocket block confirmation noise), plus a follow-up fix for iOS focus zoom.

Screenshots

iPhone-class viewport (390 CSS px, dark theme), captured against a live node.

Home · latest operations	Transaction · details	Address · summary + QR
Block · summary + transactions	Delegate Monitor · DPoS control room	Network Monitor · peer map

What changed by surface

• Header and search: the universal search moved out of the collapsed menu into the top bar between the logo and the menu toggle, and compacts on small screens; the network rail keeps a comfortable status inset
• Home / latest operations: the cramped table fallback is replaced by operation cards
• Blocks, block, transaction, and address pages: compact, scrollable transaction tables on mobile; the blocks list exposes a TXS count column; the transaction page hides its duplicate ledger row
• Monitors and dense tables: Delegate Monitor, Network Monitor peers, Top Accounts, and Reserved Wallets get .table-mobile card fallbacks, mobile sort controls, and refined ARIA
• Tooltips and touch: custom tooltips dismiss on tap so touch devices are never left with a stuck tooltip
• iOS focus zoom: the search field no longer triggers Safari's zoom-and-scroll on focus

Implementation notes

• Breakpoint model. Two structural breakpoints drive the layout: at <=720px wide data tables collapse into cards or compact scroll tables, and at <=420px those cards restack vertically. Desktop and tablet layouts above 720px are unchanged.

• Operation card grid. Each home row is a CSS-grid card. At <=720px the route runs on one line as sender -> recipient amount open; at <=420px it restacks with a centered down arrow and the amount beside it, and horizontally centered sender/recipient. Navigation (and the tooltip) is bound only to the explicit open control, not the whole card.

• Table vs card fallback. Block and address transaction lists stay real tables on mobile — horizontally scrollable inside their container with a fixed compact column set (Type, ID, Sender, Recipient, Amount; plus Date on the address page) and no per-row copy buttons; the block list drops sorting.

• Address / key wrapping fix. Summary values were being wrapped onto a lone trailing character even with room to spare. Root cause: a flex item with min-width: 0 and overflow-wrap: anywhere collapses to its 1-character min-content contribution, so the copy button's width forced a break. The value now grows to fill the cell (flex: 1), so addresses and transaction IDs stay on one line and public keys wrap cleanly.

• Tooltip touch dismissal. The single body-level tooltip becomes pointer-interactive only while visible and hides on pointerdown, guaranteeing an exit on touch where the auto-hide timer is not always reliable.

• iOS auto-zoom. Mobile Safari zooms any focused input whose font is below 16px, which then leaves the page scrolled. The search input is pinned to 16px; the viewport meta keeps user zoom enabled for accessibility.

Node WebSocket block confirmation (Adamant-im/adamant-explorer#41)

Compact WebSocket block notifications are hydrated through the Node REST API with a single bounded retry for the expected cross-node Block not found SQL-visibility lag. A height fallback must still confirm the announced block id and height. The first miss is logged at debug and a warn is emitted only when confirmation is genuinely exhausted, so routine cross-node timing no longer produces error noise. Node-only unit tests cover the retry, fallback, validation, and logging paths.

Validation

• npm run lint, npm run format:check, and npm run test:unit (225 tests, including WebSocket block hydration) pass
• git diff --check is clean
• Desktop and tablet layouts above 720px are unchanged (no regression)

Links

• Pull request: Fix: Improve mobile UX and quiet WebSocket block confirmation misses adamant-explorer#42
• Issues: [Bug] [UX/UI] Fix display issues and improve mobile and small-screen UX adamant-explorer#40, [Chore] Quiet WebSocket block REST confirmation misses adamant-explorer#41

[adamant-al]

Looks amazing