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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions