Skip to content

Add middle stage size (360x270) with 600px min-height support #39

@takaokouji

Description

@takaokouji

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

  • Phase 1: Min-height is 600px
  • Phase 2: Middle size (360x270) selectable via 3-button toggle
  • Phase 2: Sprite info x, y labels above inputs for middle size only
  • Phase 3: Middle is default, layout is balanced
  • All tests pass
  • No layout overflow at 600px height
  • Smooth transitions between sizes

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions