fix(zoom-ui): align screenshot button + Ruby zoom column with scratch-blocks v2#639
Merged
takaokouji merged 1 commit intoMay 5, 2026
Conversation
…-blocks v2 scratch-blocks v2's `ScratchZoomControls` uses MARGIN_VERTICAL = MARGIN_HORIZONTAL = 20 (vs v1's 12) inside the workspace's view metrics (which exclude the 11px scratch-blocks scrollbar). The Code tab camera button was hard-coded at right=22/bottom=154 — values tuned for v1 — so it drifted off the v2 zoom column on desktop and shifted further on mobile / window resize because scrollbar width is platform dependent. The Ruby tab's zoom column was at right=22/bottom=22, which sat 11px inboard of the Code tab's actual on-screen position, producing a visible jump when switching tabs. Fixes: - `BlocksScreenshotButton` now measures the live `.blocklyZoomIn` position via `useLayoutEffect` + `ResizeObserver` and pins the camera button 8px above its top edge, with right edges flush. Survives scrollbar variance, mobile orientation, and any v2 zoom-controls reflow. CSS keeps right=20/bottom=152 as a one-frame fallback that matches the v2 layout (MARGIN(20) + ZOOM_HEIGHT(124) + GAP(8)). - `ruby-tab.css` `.zoomControlsWrapper` moves to right=31/bottom=31 (= MARGIN(20) + scratch-blocks scrollbar(11)) so the Ruby tab column lands at the same screen X/Y as the Code tab's zoom controls. Verified with Playwright at desktop and 800/812-wide viewports — camera buttons match within 1px. Removes orphan `.downloadButton` / `.downloadIcon` / `.downloadWrapper` rules from ruby-tab.css; ruby-tab.jsx hasn't used them since the camera moved into `zoomControlsWrapper`.
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/fix/zoom-ui-screenshot-button-position/ |
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
scratch-blocks v2 で zoom controls の位置が変わったため、Code タブの命令ブロック撮影ボタン（カメラアイコン）と Ruby タブの zoom UI カラムの位置を再調整。
Background
過去 (Mar 8, 2026) の v2 対応 commit
a27336b3e6でも同様の調整が入っていたが、5e5163708aで v1.3.0 互換のため revert され、その後の6f748844fdでも v1 値に戻っていた。今回の upstream merge は v2 を本採用するため再度 v2 値に戻す + 改善を行う。Changes
1. Code タブのカメラボタン (
BlocksScreenshotButton)useLayoutEffect+ResizeObserverで.blocklyZoomIn要素の位置を測定し、その上 8px に揃えるMARGIN(20) + ZOOM_HEIGHT(124) + GAP(8) = bottom 152, right 20) に更新2. Ruby タブの zoom UI カラム (
zoomControlsWrapper)right: 22/bottom: 22→right: 31/bottom: 313. クリーンアップ
.downloadButton/.downloadIcon/.downloadWrapperの使われていない CSS rule を削除（ruby-tab.jsxから既に参照されていなかった）Test plan
Related
a27336b3e6 fix: align screenshot button and ruby tab zoom with Blockly zoom controlsScratchZoomControls(MARGIN_VERTICAL = MARGIN_HORIZONTAL = 20, total height 124px)