ADAMANT Explorerでは、Vueへのリデザイン後も高密度なブロックチェーンデータ（テーブル、アドレス、モニター、ピアマップ、ネットワークグラフなど）をスマートフォンや狭いビューポートで読みやすく、使いやすくするための集中的な改善を行いました。この作業は Adamant-im/adamant-explorer#42 として dev ブランチに統合され、表示/モバイルUXおよびWebSocketブロック確認時のノイズに関する課題を解決したほか、iOSでのフォーカス時のズーム問題に対する修正も行われました。
画面ごとの変更点
ユニバーサル検索機能を折りたたみメニューからロゴとメニュー切り替えボタンの間のトップバーへ移動させました。これにより小画面ではコンパクトに収まり、ネットワークレールは適切なステータス表示を維持します。ホームページでは、窮屈だったテーブル表示をオペレーションカード形式に変更しました。ブロック、トランザクション、アドレスの各ページでは、モバイル向けにコンパクトでスクロール可能なトランザクションテーブルを採用しています。ブロックリストには TXS（トランザクション数）カラムを追加し、トランザクションページでは重複していたレジャー行を非表示にしました。デリゲートモニター、ネットワークモニターのピア一覧、トップアカウント、予約済みウォレットには .table-mobile カード形式のフォールバック、モバイル用ソートコントロール、および洗練されたARIA対応を実装しました。カスタムツールチップはタップで非表示になるようにし、タッチデバイスでツールチップが消えなくなる問題を解消しました。また、検索フィールドにフォーカスした際にSafariがズーム・スクロールしてしまう挙動も修正しています。
実装ノート
レイアウトは2つの構造的なブレークポイントで制御されます。幅 <=720px ではデータテーブルがカード形式またはコンパクトなスクロールテーブルに切り替わり、<=420px ではカードが垂直に再配置されます。720px を超えるデスクトップおよびタブレットのレイアウトに変更はありません。
各ホーム行はCSSグリッドカードです。<=720px では 送信元 -> 受信者 金額 開く と1行で表示され、<=420px では中央に下矢印を配置し、その横に金額を、送信元と受信者を中央揃えで表示するように再配置されます。ナビゲーションとツールチップはカード全体ではなく、明示的な「開く」コントロールにのみバインドされています。
ブロックおよびアドレスのトランザクションリストは、モバイルでも実際のテーブルとして維持されます。コンテナ内で水平スクロールが可能で、固定されたコンパクトなカラムセット（タイプ、ID、送信元、受信者、金額。アドレスページには日付を追加）を表示し、行ごとのコピーボタンは非表示にしました。ブロックリストではモバイル時のソートを無効化しています。
サマリー値の表示において、アドレスやトランザクションIDが不自然に改行されるバグを修正しました。原因は flex アイテムの min-width: 0 と overflow-wrap: anywhere が1文字の最小コンテンツとして計算され、コピーボタンの幅によって改行が強制されていたことでした。現在は値がセルを埋めるように成長 (flex: 1) するため、アドレスやトランザクションIDは1行に収まり、公開鍵は適切に折り返されるようになります。
単一のボディレベルツールチップは表示中のみポインター操作が可能となり、pointerdown で非表示になるようにしました。これにより、自動非表示タイマーが不安定なタッチ環境でも確実に終了させることができます。iOSのMobile Safariではフォントサイズが16px未満の入力フィールドにフォーカスするとズームが発生し、ページがスクロールされてしまいます。そのため、検索入力のフォントサイズを16pxに固定しつつ、アクセシビリティのためにビューポートメタタグでユーザーによるズームを許可しています。
Node WebSocketブロック確認
コンパクトなWebSocketブロック通知は、Node REST APIを通じてハイドレーションされます。ノード間のSQL可視性のラグによる「Block not found」エラーに対しては、1回のみの限定的な再試行を行います。高さのフォールバックでは、通知されたブロックIDと高さを再度確認する必要があります。最初の失敗は debug ログに記録され、確認が完全に失敗した場合にのみ warn が出力されるため、ノード間のタイミングによる日常的なエラーノイズは発生しなくなりました。Node専用のユニットテストで、再試行、フォールバック、検証、ログ出力のパスを網羅しています。
検証
npm run lint、npm run format:check、および npm run test:unit（WebSocketブロックハイドレーションを含む225のテスト）はすべてパスしました。git diff --check に問題はなく、720px以上のデスクトップおよびタブレットレイアウトにもリグレッション（退行）は発生していません。