Add fullscreen button with auto-hide navbar for proxied content

[Copilot]

Adds a fullscreen button next to the settings button that fullscreens the proxied iframe and implements browser-like navbar auto-hide behavior on mouse proximity.

Changes

• Fullscreen button: Icon toggles between expand/collapse states, positioned before settings button in navbar
• Auto-hide navbar: Both tab and search bars slide up on fullscreen entry, reveal on mouse move to top 50px, auto-hide after 3s idle
• ESC key handler: Exits fullscreen with proper state management
• CSS transitions: 0.3s slide animations for navbar show/hide, iframe expands to 100vh in fullscreen mode

Implementation

function handleMouseMoveInFullscreen(e) {
  if (e.clientY <= 50) {
    showNavbar();
    navHideTimeout = setTimeout(() => hideNavbar(), 3000);
  } else if (e.clientY > 150) {
    hideNavbar();
  }
}

State managed via isFullscreenMode flag, updated consistently across toggle button and ESC key paths.

Screenshots

Normal view with fullscreen button:

Fullscreen mode (navbar shown on mouse proximity):

Dark mode:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• example.com
  • Triggering command: /usr/local/bin/node node src/server.js (dns block)
• google.com
  • Triggering command: /usr/local/bin/node node src/server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

add a simple fullscrenn button righ next to the settings button on the top navbar which fullscreens the proxied iframe and makes the entire upper navbar (tab and searchbar rows) drop down when you move your mouse to the top like a real browser.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview