microsoft / microsoft/pxt-microbit

[Code Evaluation] The Play button becomes oversized in small browser window

Open Beginner friendly
#6,995 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
804
Forks
721
Avg merge
2d 9h
Merged PRs (30d)
2

Description

Describe the bug
When the browser window is resized to a smaller width, the Play button in the Code Evaluation tool scales incorrectly and becomes disproportionately large compared to surrounding UI elements.

Steps to reproduce the behavior:

  1. Navigate to MakeCode Code Evaluation.
  2. Enter a Shared Project link, e.g. https://makecode.microbit.org/S49237-69514-96142-91189.
  3. Resize the browser window to a small width.
  4. Observe the Play button in the bottom-right corner.

Actual behavior
The Play button becomes oversized when the window width is reduced, resulting in an inconsistent UI layout.

Expected behavior
The Play button should scale appropriately and maintain a consistent size, layout, and visual alignment with other controls regardless of window size.

Screenshots
Image

Additional context
1.OS: Windows 11 25H2
2.Browser: Chrome, Edge, and Firefox
3.makecode.microbit.org version: 8.1.30
4.Microsoft MakeCode version: 12.3.26

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the MakeCode Code Evaluation tool at https://makecode.microbit.org/beta---eval, enter the provided Shared Project link, and inspect the Play button in the bottom-right corner while narrowing the browser window. Trace the responsive styling for that control and verify that it keeps an appropriate size, layout, and alignment in small windows across Chrome, Edge, and Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.