This commit is contained in:
Manav Rathi
2025-02-05 13:10:10 +05:30
parent de5ece27f2
commit d2e5b87bf7
2 changed files with 10 additions and 7 deletions

View File

@@ -351,11 +351,15 @@ const createMainWindow = () => {
// [Note: Customize the desktop title bar]
//
// 1. Remove the default title bar.
// 2. On Linux and Windows, reintroduce the title bar controls (macOS
// always does it).
// 3. Show a custom title bar in the renderer using `app-region: drag`
// to allow dragging the window by the title bar, and using the
// Window Controls Overlay CSS variables to determine its dimensions.
// 2. Reintroduce the title bar controls.
// 3. Show a custom title bar in the renderer.
//
// For step 3, we use `app-region: drag` to allow dragging the window by
// the title bar, and use the Window Controls Overlay CSS environment
// variables to determine its dimensions. Note that these overlay CSS
// environment vars are only available when titleBarOverlay is true, so
// unlike the tutorial which enables it only for Windows and Linux, we
// do it (Step 2) unconditionally (i.e., on macOS too).
//
// https://www.electronjs.org/docs/latest/tutorial/custom-title-bar#create-a-custom-title-bar
titleBarStyle: "hidden",

View File

@@ -212,8 +212,7 @@ const redirectToFamilyPortal = () =>
// See: [Note: Customize the desktop title bar]
const WindowTitlebar = styled("div")`
width: 100%;
--fallback-title-bar-height: 30px;
height: env(titlebar-area-height, var(--fallback-title-bar-height));
height: env(titlebar-area-height, 30px /* fallback */);
display: flex;
/* Allow using the titlebar to drag the window */
app-region: drag;