fix(playground): overlay run button for shared playground

[OnkarRuikar]

• fix Improve discoverability of "Run" action for Playground links #665

Description

Need a prominent Run button on canvas for shared playgrounds because the shared code could be untrustworthy.

Motivation

In the current state it is not apparent that users are supposed to click run button to get the output and begin autorun for the shared playgrounds.
It was requested to have big button spanning the entire canvas.

@OnkarRuikar that's ok, but given how unusual it is to look at a playground and not see the result, I feel this will be the likely first interaction on the page, so it need to be big and cover the canvas, and be easy to resolve.

Additional details

For testing used this link: http://localhost:3000/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

After changes UI:

runButton.mp4

Related issues and pull requests

#665

[LeoMcA]

I like the implementation, I think the design could be a little better - could we use the same icon we use in the top nav next to the playground link, obviously a little bigger, so it's almost like a video play icon overlay?

[OnkarRuikar]

could we use the same icon we use in the top nav next to the playground link,

Done. Used the circle-play icon.

obviously a little bigger,

Made the size bigger and responsive.

so it's almost like a video play icon overlay?

We play videos and run code so shouldn't it be called "MDN Runground"? 🤔
To not give false impression of existence video content in the output, can we use " ▶ Run" instead of just the icon?

playRun.mp4

[LeoMcA]

Let me... "Run" this past our content team and see what they think

[caugner]

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

[OnkarRuikar]

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

"Risk of pressing run", we don't want to scare users so much that they won't even run the code. We already have report banner at the top, how about we reword it like the following?

[github-actions]

ef1e47d was deployed to: https://fred-pr712.review.mdn.allizom.net/

[caugner]

https://fred-pr712.review.mdn.allizom.net/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

[caugner]

The button seems to overflow weirdly now.

Could the button take the whole area of the iframe, and look like the other buttons on the page in terms of border/background color and hover effect?

[OnkarRuikar]

Could the button take the whole area of the iframe, and look like the other buttons on the page in terms of border/background color and hover effect?

@caugner Do you mean without the white padding around? Like the following:

overlay_button_white-2026-03-19_08.15.53.mp4

For dark theme it's a bit tricky, because the button sits on top of a white iframe. So we need to set the background color manually. What theme color variable should I use for background-color: var(--color-XXX)? All the theme colors involve light shades and not a single one has pitch dark color. Or should I create a new theme variable just for this button with values white|black?

[caugner]

Do you mean without the white padding around? Like the following:

Yes, exactly like that.

For dark theme it's a bit tricky, because the button sits on top of a white iframe. So we need to set the background color manually.

Could we use background-color: var(--color-background-page)?