Add footer with legal links to editor using Primer CSS

[Copilot]

Adds footer to the gh-aw Playground editor matching the documentation site footer.

Changes

• Footer element with attribution (GitHub Next & Microsoft Research) and legal links (Terms, Privacy, Security)
• Layout adjustment: Changed main container from height: 100vh to min-height: 100vh to accommodate footer
• Primer CSS classes: d-flex, flex-column, color-fg-muted, Link--primary/secondary, responsive wrapping

Implementation

<footer class="d-flex flex-column flex-items-center gap-2 px-3 py-3 color-bg-default border-top f6">
  <div class="d-flex flex-items-center gap-2 color-fg-muted flex-wrap flex-justify-center">
    <span>Made with</span>
    <svg><!-- heart icon --></svg>
    <span>by</span>
    <a href="https://githubnext.com/" class="Link--primary">GitHub Next</a>
    <span>&amp;</span>
    <a href="https://www.microsoft.com/en-us/research/" class="Link--primary">Microsoft Research</a>
  </div>
  <div class="d-flex flex-items-center gap-2 color-fg-subtle flex-wrap flex-justify-center">
    <a href="..." class="Link--secondary">Terms</a>
    <span>·</span>
    <a href="..." class="Link--secondary">Privacy</a>
    <span>·</span>
    <a href="..." class="Link--secondary">Security</a>
  </div>
</footer>

Screenshots

Desktop:

Light/Dark modes:

Mobile:

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR adds a footer to the gh-aw Playground editor that matches the documentation site footer, providing attribution to GitHub Next and Microsoft Research along with legal links.

Changes:

• Added a semantic footer element with attribution and legal links (Terms, Privacy, Security) using Primer CSS classes
• Changed main container from height: 100vh to min-height: 100vh to accommodate the footer
• Implemented responsive design with flexbox wrapping for mobile compatibility

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The change from height: 100vh to min-height: 100vh will not work correctly with the current CSS. The html, body styles at line 13-16 set overflow: hidden, which will prevent scrolling and cut off the footer.

To fix this issue, you need to update the body overflow behavior to allow scrolling when content exceeds the viewport height. Consider changing overflow: hidden to overflow: auto on the body element, or restructure the layout so the footer is positioned within the viewport constraints.

Suggested change

	<div class="d-flex flex-column" style="min-height: 100vh; width: 100vw;" id="app">
	<div class="d-flex flex-column" style="height: 100vh; width: 100vw;" id="app">