Search code examples
javascripthtmlprogressive-web-apps

Is there a way to add a border to the buttons on a PWA's title bar?

I have a PWA with window-controls-overlay enabled.

{
    "name": "PWA",
    "start_url": "index.html",
    "display": "standalone",
    "display_override": ["window-controls-overlay"],
    "icons": [...]
}

The header has a border, but it cuts off at the OS buttons. How do I add a border to the bottom of the OS buttons?

enter image description here

Solution

  • For anyone here from google, I found that you can create borders using absolute positioning.

    Here's the right side:

    <div id="right-pwa"></div>

    #right-pwa {
    position: absolute;
    top: env(titlebar-area-height, 33px);
    left: calc(env(titlebar-area-width) + env(titlebar-area-x));
    width: calc(100vw - env(titlebar-area-width) - env(titlebar-area-x));
    height: 0;
    border-bottom: 1px solid var(--color);
}

    And the left side: (Untested, ChromeOS, my current platform, doesn't have any buttons on the left. This is mainly for MacOS)

    <div id="left-pwa"></div>

    #left-pwa {
    position: absolute;
    top: env(titlebar-area-height, 33px);
    left: 0;
    width: env(titlebar-area-x, 0);
    height: 0;
    border-bottom: 10px solid var(--color);
}