Background
Current minimum screen height is 640px, but target PC minimum is 600px. Need to add a middle stage size to better accommodate 600px height while maintaining usable UI.
Requirements
Phase 1: Reduce Min-Height
- Change
min-height: 640px to min-height: 600px in playground/index.css
Phase 2: Add Middle Stage Size
- Add middle size constants (360x270, scale 0.75)
- Update stage size resolution logic
- Add 3rd toggle button (small | middle | large)
- Adjust sprite info x, y labels to appear above inputs for middle size only
- Keep
largeConstrained for backward compatibility
Phase 3: Make Middle Default
- Set default stage size to middle
- Verify layout balance at 600px height
Completion Criteria
Files to Modify
packages/scratch-gui/src/playground/index.css
packages/scratch-gui/src/lib/layout-constants.js
packages/scratch-gui/src/lib/screen-utils.js
packages/scratch-gui/src/components/stage-header/stage-header.jsx
packages/scratch-gui/src/components/stage-header/icon--middle-stage.svg (new)
packages/scratch-gui/src/containers/stage-header.jsx
packages/scratch-gui/src/reducers/stage-size.js
packages/scratch-gui/src/components/sprite-info/sprite-info.jsx
Notes
- Minimize conflicts when merging upstream changes
- Use "Smalruby:" comments for all modifications
- Keep largeConstrained (don't delete)
- Follow existing patterns and code style
Background
Current minimum screen height is 640px, but target PC minimum is 600px. Need to add a middle stage size to better accommodate 600px height while maintaining usable UI.
Requirements
Phase 1: Reduce Min-Height
min-height: 640pxtomin-height: 600pxinplayground/index.cssPhase 2: Add Middle Stage Size
largeConstrainedfor backward compatibilityPhase 3: Make Middle Default
Completion Criteria
Files to Modify
packages/scratch-gui/src/playground/index.csspackages/scratch-gui/src/lib/layout-constants.jspackages/scratch-gui/src/lib/screen-utils.jspackages/scratch-gui/src/components/stage-header/stage-header.jsxpackages/scratch-gui/src/components/stage-header/icon--middle-stage.svg(new)packages/scratch-gui/src/containers/stage-header.jsxpackages/scratch-gui/src/reducers/stage-size.jspackages/scratch-gui/src/components/sprite-info/sprite-info.jsxNotes