Skip to content

fix(mobile-ui): fix full-screen modal layout broken on SP viewport (#698)#699

Merged
takaokouji merged 6 commits into
developfrom
fix/issue-698-sp-modal-layout
May 22, 2026
Merged

fix(mobile-ui): fix full-screen modal layout broken on SP viewport (#698)#699
takaokouji merged 6 commits into
developfrom
fix/issue-698-sp-modal-layout

Conversation

@takaokouji
Copy link
Copy Markdown

@takaokouji takaokouji commented May 21, 2026

Summary

  • SP(スマホ)版で変数・リスト・カスタムブロック作成モーダルが全画面になるとき、OK ボタンが画面外に押し出されて操作不能になる問題を修正
  • mobile-gui.css の CSS セレクター 1 文字(スペース → >)と height: 100% 削除のみの変更
  • iOS Safari で「ブロックを作る」タップ時に「新しい変数」モーダルが誤表示される問題を修正

Fix 1: SP モーダルレイアウト崩れ

Root Cause

mobile-gui.css[class*="modal_modal-content"] [class*="box_box"]子孫セレクターになっており、モーダル内の全 Box 要素(label、input wrapper、buttonRow 等)に height: 100% !important が適用されていた。

Fix

-:global(body.smalruby-mobile-mode [class*="modal_modal-content"] [class*="box_box"]) {
+:global(body.smalruby-mobile-mode [class*="modal_modal-content"] > [class*="box_box"]) {
     flex: 1 1 auto !important;
     min-height: 0 !important;
     width: 100% !important;
-    height: 100% !important;
     overflow-y: auto !important;
     -webkit-overflow-scrolling: touch !important;
 }

Playwright 実測 (844×390 viewport)

測定値 修正前 修正後
prompt_body.scrollHeight 1134px 246px
label height 342px 19.5px
buttonRow height 342px 46.5px
OK ボタン visible ❌ false ✅ true

Fix 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

)

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>
@github-actions
Copy link
Copy Markdown

takaokouji and others added 5 commits May 22, 2026 09:09
…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>
@takaokouji takaokouji merged commit 3826a61 into develop May 22, 2026
9 checks passed
@takaokouji takaokouji deleted the fix/issue-698-sp-modal-layout branch May 22, 2026 01:41
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(mobile-ui): SP全画面モーダルのレイアウト崩れを修正(変数・リスト・カスタムブロック作成)

1 participant