Skip to content

Add fullscreen button to navbar with auto-hide behavior and improve WebSocket support#17

Draft
Copilot wants to merge 4 commits intomainfrom
copilot/add-fullscreen-button-navbar-again
Draft

Add fullscreen button to navbar with auto-hide behavior and improve WebSocket support#17
Copilot wants to merge 4 commits intomainfrom
copilot/add-fullscreen-button-navbar-again

Conversation

Copy link
Contributor

Copilot AI commented Jan 14, 2026

Adds a fullscreen button next to the settings button that expands the proxied iframe to fill the viewport, with navbar auto-hide on mouse-out and reveal on hover at screen top—mimicking native browser fullscreen behavior. Also improves WebSocket/WSS connection support for external servers.

Changes

  • Fullscreen button: Maximize/minimize icon toggle in nav-right, uses existing .nav-btn styling
  • CSS fullscreen mode: Tab bar and upper nav slide completely out of sight with smooth 0.3s transition using negative top positioning with --fullscreen-hide-offset variable to ensure borders are hidden
  • Hover trigger: Invisible 20px zone at screen top reveals navbar on mouseenter
  • Exit methods: Button toggle or ESC key
  • Cleanup: Proper event listener removal on mode exit to prevent memory leaks
  • WebSocket improvements: Enhanced libcurl transport configuration with explicit wisp transport mode and increased connection limits (50 active, 30 cached, 10 per host) for better support of WebSocket-heavy sites like games
  • Transport reliability: Added early transport initialization at page load and verification before each proxy load to ensure consistent transport across tabs

Screenshots

Normal mode with fullscreen button

Fullscreen mode (completely clean - no gray bar)

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. be shure to use the same icons and button style


✨ 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
Copy link

codesandbox bot commented Jan 14, 2026

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Co-authored-by: sriail <225764385+sriail@users.noreply.github.com>
Copilot AI changed the title [WIP] Add fullscreen button to top navbar Add fullscreen button to navbar with auto-hide behavior Jan 14, 2026
Copilot AI requested a review from sriail January 14, 2026 21:55
@sriail
Copy link
Owner

sriail commented Jan 14, 2026

update the tab bar so it can go fully out of site when in fullscreen. also even with the libcurl implementation, weather external server like in buildnow.gg or wss connections sometimes dont work. fix this

@sriail
Copy link
Owner

sriail commented Jan 14, 2026

@copilot update the tab bar so it can go fully out of site when in fullscreen. also even with the libcurl implementation, weather external server like in buildnow.gg or wss connections sometimes dont work. fix this

Co-authored-by: sriail <225764385+sriail@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 14, 2026

@copilot update the tab bar so it can go fully out of site when in fullscreen. also even with the libcurl implementation, weather external server like in buildnow.gg or wss connections sometimes dont ...

Fixed in 705518c:

  1. Tab bar now fully hidden in fullscreen: Updated CSS so both tab bar and upper nav slide completely out of sight when in fullscreen mode.

  2. Improved WebSocket/WSS support: Enhanced libcurl transport configuration with:

    • Explicit wisp transport mode for multiplexed connections
    • Increased connection limits (50 active, 30 cached, 10 per host) for better support of WebSocket-heavy sites

Fullscreen mode - completely hidden navbar

Copilot AI changed the title Add fullscreen button to navbar with auto-hide behavior Add fullscreen button to navbar with auto-hide behavior and improve WebSocket support Jan 14, 2026
@sriail
Copy link
Owner

sriail commented Jan 14, 2026

@copilot the fullscreen is better but ther is still a small gray bar at the top of the screen at all times, fix this. also scramjet is vary unreliable with the wss libcurl (most likeley because on the first search, libcurl is on, but in a new tab, epoxy is serving a transport) or some similar issue. fix both of these bugs

Co-authored-by: sriail <225764385+sriail@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Jan 14, 2026

@copilot the fullscreen is better but ther is still a small gray bar at the top of the screen at all times, fix this. also scramjet is vary unreliable with the wss libcurl (most likeley because on the...

Fixed in c6d162a:

  1. Gray bar removed: Changed CSS to use negative top positioning with extra offset (--fullscreen-hide-offset) to completely hide the tab bar and nav bar including their borders.

  2. Transport reliability: Improved transport configuration to always verify and set the correct transport before loading proxied content. Added early transport initialization at page load to ensure consistency across tabs.

Fullscreen mode - no gray bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants