microsoft / microsoft/pxt-microbit
[iPad][Portrait] “Show Instructions” text is not centered in expand panel button
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 804
- Forks
- 721
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 2
Description
Describe the bug
On iPad portrait mode, the “Show Instructions” label is visually misaligned and not centered within the expand panel button.
Steps to reproduce the behavior:
- Navigate to https://makecode.microbit.org/beta on an iPad.
- Ensure the device is in portrait mode.
- Open any card that includes a "Show Instructions" button.
- Observe the alignment of the button label at the bottom of the expand panel.
Actual behavior
The “Show Instructions” text is not centered within the button and appears misaligned.
Expected behavior
The “Show Instructions” text should be horizontally centered within the button, consistent with other button labels across the UI.
Screenshots
Additional context
1.OS: iPad Pro 11 26.4.2
2.Browser: Safari
3.Makecode.microbit.org version: 8.1.13
4.Microsoft MakeCode version: 12.3.9
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue on an iPad in portrait mode at the beta site, then locate the UI component that renders the “Show Instructions” expand-panel button. Check the button's layout and styling against other centered labels; done means the text is horizontally centered without affecting other button states or layouts.
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
- 65/100