diff --git a/components/playground/element.css b/components/playground/element.css index 9a56bc330..19bbbca62 100644 --- a/components/playground/element.css +++ b/components/playground/element.css @@ -31,9 +31,6 @@ padding: 0.5rem; - border: var(--border); - border-radius: 0.25rem; - h1 { margin: 0; margin-right: auto; @@ -92,21 +89,34 @@ } } + .playground__runner-menu { + align-self: flex-end; + padding: 0.5rem 0; + + mdn-button { + border: var(--border); + border-radius: 0.25rem; + } + + @media (--screen-medium-and-narrower) { + align-self: center; + } + } + &.playground__runner-console { grid-area: runner; - overflow: hidden; - border: var(--border); - border-radius: 0.25rem; - mdn-play-runner { flex-grow: 1; + border: var(--border); + border-radius: 0.25rem; } .playground__console { background-color: var(--color-background-secondary); - border-top: var(--border); + border: var(--border); + border-radius: 0.25rem; div { font-size: var(--font-size-small); diff --git a/components/playground/element.js b/components/playground/element.js index 5fa9fe858..a999cc860 100644 --- a/components/playground/element.js +++ b/components/playground/element.js @@ -4,6 +4,7 @@ import { createRef, ref } from "lit/directives/ref.js"; import { L10nMixin } from "../../l10n/mixin.js"; import { gleanClick } from "../../utils/glean.js"; +import warningIcon from "../icon/triangle-alert.svg?lit"; import { globalUser } from "../user/context.js"; import styles from "./element.css?lit"; @@ -357,9 +358,17 @@ ${"```"}`,
${this._gistId - ? html` - ${this.l10n`Seeing something inappropriate?`} - ` + ? html`` : nothing}