fix(mobile-ui): fix full-screen modal layout broken on SP viewport (#698)#699
Merged
Conversation
) mobile-gui.css の `[class*="box_box"]` セレクターが子孫セレクターになっており、 モーダル内部の全 Box 要素に `height: 100% !important` が適用されていた。 Scratch は全コンテナに Box コンポーネントを使うため、prompt の label / buttonRow 等にも同ルールが当たり、それぞれが ~342px に膨張して OK ボタンが画面外に 押し出されスクロールしないと押せない状態になっていた。 `> [class*="box_box"]` の直下セレクターに変更し、modal-content の直接の子 (outerBox = Modal が wrap する Box) にのみ適用するよう修正。 `height: 100%` は削除し `flex: 1 1 auto` で代替する。 Playwright 実測 (844×390 viewport): - prompt_body.scrollHeight: 1134px → 246px - label height: 342px → 19.5px - buttonRow height: 342px → 46.5px - OK ボタン visible: false → true Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/fix/issue-698-sp-modal-layout/ |
…tapped on iOS (#698) On iOS Safari with MobileGui, tapping "ブロックを作る" in the Blockly flyout can also fire the "変数を作る" button callback, showing a variable creation modal before the custom procedures modal appears. Root cause: iOS touch event propagation in the Blockly flyout causes the CREATE_VARIABLE callback to fire together with CREATE_PROCEDURE when the user taps the "ブロックを作る" button. Both callbacks use rAF+setTimeout delay, so CREATE_VARIABLE (earlier in DOM) fires first. Fix: defer handlePromptStart by 50ms. If externalProcedureDefCallback fires within that window (meaning the user tapped "ブロックを作る"), the pending variable prompt is cancelled before it can setState. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…#698) Log when handlePromptStart and externalProcedureDefCallback are called, including timestamps and stack traces, so the execution order and timing can be observed in iOS Safari devtools. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…l opens first on iOS (#698) Debug logs revealed the actual execution order: - externalProcedureDefCallback fires first (t=531) - handlePromptStart fires 152ms later (t=683) - 50ms timer fires (t=734) → variable modal shows The previous fix only handled the reverse order. This adds a _procedureJustActivated flag (300ms TTL) set when externalProcedureDefCallback fires, so handlePromptStart's deferred timer suppresses the variable modal when the procedure modal has already opened. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… fix (#698) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…pe (#698) Reduce workspace min/max-height 200→110px and compress body padding, option cards, and button row so OK button stays within 375px viewport. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions Bot
pushed a commit
that referenced
this pull request
May 22, 2026
…-sp-modal-layout fix(mobile-ui): fix full-screen modal layout broken on SP viewport (#698)
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
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
mobile-gui.cssの CSS セレクター 1 文字(スペース →>)とheight: 100%削除のみの変更Fix 1: SP モーダルレイアウト崩れ
Root Cause
mobile-gui.cssの[class*="modal_modal-content"] [class*="box_box"]が子孫セレクターになっており、モーダル内の全 Box 要素(label、input wrapper、buttonRow 等)にheight: 100% !importantが適用されていた。Fix
Playwright 実測 (844×390 viewport)
prompt_body.scrollHeightFix 2: iOS で「ブロックを作る」タップ時に「新しい変数」モーダルが誤表示
Root Cause
iOS Safari の MobileGui 環境で、Blockly flyout の「ブロックを作る」ボタンをタップすると、
CREATE_VARIABLEコールバックも誤発火する。両コールバックはrAF+setTimeout遅延を使うため、DOM 順序が早いCREATE_VARIABLEが先に実行され、変数作成モーダルが表示される。upstream の Scratch iOS では再現しないことから、MobileGui のレイアウト変更(padding-left: 56px等)が Blockly の flyout イベント処理に影響していると推定される。Fix
handlePromptStartを 50ms 遅延させ、その間にexternalProcedureDefCallback(「ブロックを作る」の正規ハンドラー)が呼ばれた場合はペンディング中の変数プロンプトをキャンセルする。Closes
Closes #698