fix(mobile-ui): stop forcing mobile mode on wide short screens + add mode override (#865)

[smalruby3-editor-bot]

Summary

Chromebook をズームして高さだけ縮んだ広い画面 (例 1380×480) が意図せずスマホモードに入ってしまう問題を修正する (Issue #865)。あわせて、ユーザーが表示モードを明示指定して固定できるようにする。

Changes Made

• スマホモード判定を厳格化 (src/lib/use-is-narrow-screen.js): 高さ条件 (max-height: 500px) を 幅 950px 以下に限定 ((max-width: 950px) and (max-height: 500px))。これによりスマホ横持ち (iPhone Pro Max ~932px) は拾いつつ、Chromebook / ノート PC の一般的な幅 (>=1280px) を確実に除外する。1380×480 の Chromebook はスマホモードにならない。iPhone 縦持ちのように横が極端に狭い端末は従来どおり (max-width: 743px) で拾う。
• 表示モードのユーザー設定を追加 (src/lib/settings/display-mode/): auto / desktop / mobile の 3 モード。localStorage (smalruby:displayMode) に保存し、そのマシンでは以後ずっと維持される。
• ResponsiveGui がモード設定を優先 (src/lib/responsive-gui.jsx + src/lib/use-display-mode.js): desktop は常に PC GUI、mobile は常に MobileGui、auto は viewport 判定。設定変更は同一タブ / 他タブともにリアルタイム追従。
• モバイルドロワーに「PCモードに切り替える」ボタン (src/components/mobile-drawer/): 意図せずスマホモードに入ったユーザーがワンタップで PC モードへ抜け出せる。
• 設定メニューに「表示モード」切替を追加 (src/components/menu-bar/settings-menu.jsx): 自動 / PC / スマホをいつでも切り替え可能。
• 日本語ロケール (ja.js / ja-Hira.js)、upstream マーカー一覧、mobile-ui ドキュメントを更新。

Test Coverage

• test/unit/lib/display-mode-persistence.test.js — localStorage 読み書き / バリデーション / イベント発火
• test/unit/lib/use-display-mode.test.js — hook のイベント購読とリアルタイム追従
• test/unit/lib/responsive-gui.test.jsx — モード優先ロジック (desktop/mobile/auto)
• test/unit/components/mobile-drawer.test.jsx — PCモード切替ボタン
• ローカルで上記 50 テスト + npm run lint が pass。

Related Issues

Closes #865

[smalruby3-editor-bot]

🤖 autopilot status

field	value
Status	Review
AI Status	—
HITL	Yes
Size	—

Linked issue #865. Maintained by autopilot (single writer); do not edit.

[github-actions]

🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/topic/autopilot-865/

[smalruby3-editor-bot]

🤖 autopilot 敵対的レビュー完了

別の批判的レビュアーとして差分をレビューしました。ブロッキングな問題は無く、自動修正が必要な指摘もありませんでした。 そのまま人間レビューへ渡します。

確認した観点

• 根本原因の修正が妥当: NARROW_SCREEN_QUERY の無条件 (max-height: 500px) を (max-width: 950px) and (max-height: 500px) に限定。1380×480 の Chromebook は幅 1380 > 950 かつ > 743 なのでスマホモードに入らない。iPhone 縦持ち (≤743px) とスマホ横持ち (~932px≤950) は従来どおり拾う。Issue の要件どおり。
• ユーザー設定 (auto/desktop/mobile) の設計: color-mode / ruby-version と同型の settings/ 構造・defineMessages computed key・localStorage 永続化・イベント購読 (useDisplayMode) で既存規約に忠実。auto はキー削除 = 未設定と等価で冪等。バリデーション (isValidDisplayMode) 済みで不正値は auto フォールバック。
• 脱出口が二重に用意されている: スマホモード時はモバイルドロワーの目立つ「PCモードに切り替える」ボタン、いつでも設定メニューの「表示モード」。要件を満たす。
• 規約遵守: upstream ファイル (settings-menu.jsx) にはマーカー付与、smalruby 独自ファイルにはマーカー無し。.prettierignore ホワイトリスト更新 (use-display-mode.js + 新テスト。settings/display-mode/** は既存の !src/lib/settings/ で網羅)。マーカー一覧・mobile-ui docs (ui-ux.md / playwright.md) を更新済み。
• en.js 未追加は既存慣習どおり: 新しい gui.mobile.drawer.settings.* 等も en.js に無く、defaultMessage の英語にフォールバックする方針。今回も同様で問題なし。
• セキュリティ面: 入力は localStorage 値のみで検証済み。media query 文字列へのユーザー値インジェクションは無し (クエリは静的定数)。認可・ネットワーク・外部入力の増加なし。

ローカル検証

• test/unit/lib/use-is-narrow-screen.test.js / responsive-gui.test.jsx / display-mode-persistence.test.js / use-display-mode.test.js / components/mobile-drawer.test.jsx → 55 tests pass
• npm run lint (eslint --max-warnings 0 + prettier --check) → pass

人間レビュー / DoD 向けメモ

• 実機ブラウザでの最終確認は headful の DoD 引き継ぎで: ①Chromebook 相当 (幅≥1280 かつ高さ≤500、例 1380×480) でスマホモードにならない ②スマホ横持ち (~844×390) では従来どおりスマホモード ③スマホモード中にドロワーの「PCモードに切り替える」で desktop に固定・リロード後も維持 ④設定メニューから auto/PC/スマホを往復できる、を目視推奨。

[smalruby3-editor-bot]

🧪 DoD 引き継ぎ（headful Playwright / ホスト Claude 用）

このコメントは DoD フェーズの引き継ぎドキュメントです。コンテナ内 autopilot は headless の
ため実ブラウザ確認ができません。**ホスト側のあなたの Claude（headful Playwright MCP）**で以下を
実施し、結果をこの PR にコメントしてください。

--- 以下をそのままホストの Claude に貼り付けてください。

---

役割: PR smalruby/smalruby3-editor #866（Issue #865）の DoD を headful Playwright MCP（ホストの実 Chrome）で
検証してください。autopilot はコンテナ内で headless のためあなたに引き継ぎます。

対象

• PR: smalruby/smalruby3-editor fix(mobile-ui): stop forcing mobile mode on wide short screens + add mode override (#865) #866 / ブランチ topic/autopilot-865
• プレビュー（CI ビルド済み・dev server 不要）: https://smalruby.jp/smalruby3-editor/topic/autopilot-865/
• 変更点の要約は PR 本文を参照。検証前に PR の CI が green であることを確認すること
  （daemon は CI 状態をチェックせずこの引き継ぎを生成している）。

事前準備

• ホストの Chrome を Playwright MCP で headful 操作する（reference_host_playwright_mcp.md の構成）。
• URL には常に ?no_beforeunload=1 を付ける。
• 秘密情報（バイパストークン等）は本文・ログに残さないこと。必要ならローカル .env の値を
  読み、URL パラメータに使うだけにする（値はコメントに書かない）。

検証手順（Issue の DoD チェックリスト）

以下は Issue #865 の DoD をそのまま転記したもの。各項目を headful で確認し、結果を記録する。
スクショは tmp/ に保存し、UI に視覚的変更があれば docs/<feature>/screenshots/ に既存の命名規則
（docs/_screenshot-guidelines.md）で追加してブランチに追加コミット（あなたの手元で commit/push）する。

（Issue 本文に DoD チェックリストが見つかりませんでした。Issue と PR 本文を読んで検証項目を補完してください。）

報告（完了の出口）

• すべて OK: この PR smalruby/smalruby3-editor fix(mobile-ui): stop forcing mobile mode on wide short screens + add mode override (#865) #866 に「DoD 検証 OK」+ スクショ要約をコメント。スクショ commit を push。
  → 人間が merge して Close（既存 merge-progression が leaf を Close）。
• NG / 要修正: NG 項目を PR にコメントし、🙋 HITL ラベルを外す → autopilot が DoD を解除して
  address-review を起動し、差分と全コメントを読んで対応します（Review と対称）。
• 判断に迷う: 論点を PR にコメントして人間に確認。

検証は 本番 Chrome で行うこと（Playwright の Chromium はポリシーが緩く誤検知することがある）。

[smalruby3-editor-bot]

✅ DoD 手動検証 完了（ローカル/ホストの Playwright・実 Chrome）

ブランチプレビュー topic/autopilot-865 に対し、複数 viewport で表示モードを検証（各サイズでスクショ取得済み）。

#	条件	期待	結果
1	1380×480（Chromebook 相当・広くて低い）	PCモード	✅ matchMedia(max-width:950 and max-height:500)=false・mobile-UI なし・右上ステージ/右下スプライト表示。意図せぬスマホモードにならない（#865 の本題）
2	390×844（iPhone 縦・幅≤743）	スマホモード	✅ max-width:743=true → スマホ（横向き推奨ゲート表示）
3	844×390（iPhone 横・幅≤950 かつ 高さ≤500）	スマホモード	✅ max-width:950 and max-height:500=true → スマホ。1380×480 と切り分けOK
4	モバイルのドロワー「PCモードに切り替える」	PCモード固定＋永続	✅ タップで localStorage smalruby:displayMode='desktop'・PCモード化。リロード後も維持（一度切り替えたらそのマシンでずっとPC）
5	設定メニューの「表示モード」	自動/PC/スマホをいつでも切替	✅ 「表示モード: 自動 / PCモード / スマホモード」あり・現在値にチェック表示

判定の要点

• 幅条件を (max-width: 950px) に絞ったことで、幅の広い Chromebook（1380px）は高さが低くてもスマホにならず、狭い横向きスマホ（≤950×≤500）は従来どおりスマホになる、が両立。
• モード override（ドロワー / 設定メニュー）と localStorage 永続も動作。

補足（無関係）

• モバイルサイズのロード時に Failed to initialize Google Drive API エラーが出るが、これはプレビュー環境の Google 資格情報起因の既存事象で、表示モードとは無関係（モードに関係なく発生）。fix(mobile-ui): stop forcing mobile mode on wide short screens + add mode override (#865) #866 の回帰ではない。

結論: 全 DoD クリア。マージ可能。

[takaokouji]

PCの設定メニューは、他のメニューにならって、表示モードをクリックすると、サブメニューアイテムが表示されて、PC / SPを選べるようにしてください。また、表示モードを示す適切なアイコンを設定してください。

また、スマホモードのときに、いまはスマホモードであるため、PCモードとは異なる画面であること。もし、切り替えたければメニューから切り替え可能であること、を伝えるための方法がわかりませんでした。もし用意していないのであれば、用意してください。
用意してあれば、確認手順を提示してください。

[smalruby3-editor-bot]

🤖 レビュー対応（@takaokouji さんのご指摘 2 件）

指摘 2 件: 対応 2 件 / 返信 0 件 / 対応不要 0 件。commit c438df0e40 を push しました。

① 設定メニューの「表示モード」をサブメニュー化 + アイコン

他のメニュー（テーマ / Ruby バージョン）と同じ PreferenceMenu に揃えました。

• 「表示モード」をクリックすると サブメニューが展開し、その中で 自動 / PCモード / スマホモード を選べます（現在値にチェック表示）。
• 表示モードを示す 専用アイコン（モニター）を設定しました（icon--display-mode.svg）。
• 開閉状態は他のサブメニューと同じく Redux (reducers/menus.js の displayModeMenu) で管理し、他のサブメニューを開くと自動で閉じます。

以前のフラットな 3 項目直置き（settings-display-mode-*）は廃止しました。

② スマホモードであること／PCへ切り替えられることの気付き

用意しました。 「切り替える手段」（ドロワーの『PCモードに切り替える』・設定メニューの表示モード）は既にありましたが、スマホモードだと気付かせる／PCと違うと伝える通知が無かったため、新規に追加しました。

• スマホモードに入ると、一度きりの案内バー MobileModeNotice を表示します。
  • 本文: 「いまはスマホ用の画面です（PCとは表示が違います）。」
  • ボタン: 「PCモードに切り替える」（= desktop 固定 + 閉じる）／「とじる」（スマホモードのまま閉じる）／×。
• 閉じると localStorage['smalruby:mobileModeNoticeDismissed'] に記録し、そのマシンでは以後出しません（毎回は出さない）。
• これは §4「PC 表示が崩れている警告バナーを置かない」に反する“崩れ警告”ではなく、スマホモード側で現状と脱出口を伝える中立的な案内です（docs/mobile-ui/ui-ux.md に方針を追記）。

確認手順

① PC 設定メニュー（デスクトップ幅）

1. 右上「⚙ 設定」を開く。
2. 「表示モード」（モニターアイコン + キャレット）をクリック → サブメニューが開く。
3. 自動 / PCモード / スマホモード が並び、現在値にチェック。「スマホモード」を選ぶと即 MobileGui に切り替わる（リロード不要）。

② スマホモードの案内バー

1. viewport をスマホ相当（例 844×390）にする、または設定メニューで「スマホモード」を選ぶ。
2. 画面上部に青い案内バー（data-testid="mobile-mode-notice"）が出る。
3. 「PCモードに切り替える」→ desktop 化 + バー消滅（localStorage smalruby:displayMode='desktop'）。
4. 「とじる」/ × → スマホモードのままバー消滅。リロードしても再表示されない。

テスト / lint

• 追加: test/unit/components/mobile-mode-notice.test.jsx（5 件）。
• mobile-drawer / use-display-mode / responsive-gui / display-mode-persistence / menus-reducer の関連ユニットテスト green（合計 76 件）。
• npm run lint（eslint --max-warnings 0 + prettier）green。

実機ブラウザでの最終確認（DoD）は headful でお願いします。再レビューをお願いします 🙏