feat(mobile-gui): allow dismissing orientation gate warning#693
Merged
Conversation
縦持ち警告オーバーレイ (MobileOrientationGate) に「このまま使う」(Use as is) ボタンを追加し、ユーザーが現在のブラウザセッション中だけ警告を閉じられる ようにする。dismiss 状態は sessionStorage に保持し、リロード or タブ閉じで 復活する。 背景: PC ブラウザでウィンドウを縦長にリサイズしただけで本警告が発火し、 MobileGui 上に重なって操作不能になる問題があった。永続化 (localStorage) は 実機スマホで誤タップした場合に気付けないリスクがあるため採用せず、 session スコープで「このセッションだけ閉じる」挙動にしている。 Refs #691
…ss button ja: 「このまま使う」 ja-Hira: 「このまま つかう」 Refs #691
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/feature/dismiss-orientation-gate/ |
github-actions Bot
pushed a commit
that referenced
this pull request
May 21, 2026
…ss-orientation-gate feat(mobile-gui): allow dismissing orientation gate warning
10 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
縦持ち警告オーバーレイ (
MobileOrientationGate) に「このまま使う」(Use as is) ボタンを追加し、ユーザー操作で警告を閉じられるようにする。dismiss 状態は sessionStorage に保持され、ページリロードで自動復活する。Fixes #691
Background
MobileOrientationGateは(orientation: portrait)メディアクエリだけで発火するため、PC ブラウザでウィンドウを縦長にリサイズしただけで警告が発火し、MobileGui上に被さって操作不能になっていた。警告自体は意味があるので残しつつ、ユーザーが閉じられる導線を追加する。Design Choices
Use as is) — 警告を理解した上で現状レイアウトで作業を続けるニュアンスChanges Made
Phase 1:
mobile-orientation-gate.jsx:useState+ sessionStorage 連携、handleDismiss、<button data-testid="mobile-orientation-gate-dismiss">追加。DISMISS_STORAGE_KEYを named exportmobile-orientation-gate.css:.dismiss-buttonスタイル追加 (44×44px 以上、紫背景に対し白枠 + 白テキスト)mobile-orientation-gate.test.jsx: dismiss 関連の 5 ケース追加 (ボタン表示、押下で消える、sessionStorage 書き込み、初期化時 sessionStorage 読み、orientation toggle 後も dismiss 維持)Phase 2:
ja.js: 「このまま使う」翻訳追加ja-Hira.js: 「このまま つかう」翻訳追加Implementation Steps
Test Coverage
mobile-orientation-gate.test.jsxに 8 件のテストが passDefinition of Done
SP / iPad 影響
src/components/mobile-orientation-gate/（SP 関連）data-testid="mobile-orientation-gate-dismiss"を追加 —docs/mobile-ui/playwright.mdへの追記は本 PR では割愛 (Mobile* 系コンポーネントの testid 表が現状 mobile-orientation-gate に未掲載)Related Issues
Fixes #691