fix(electron): improve window controls overlay for Windows/Linux (#5713)

- Use CSS env(titlebar-area-width) for dynamic DPI-aware spacing
- Increase fallback width from 96px to 140px to prevent button overlap
- Add theme-aware semi-transparent background to window controls

electron/main-window.ts

@@ -29,6 +29,16 @@ import { SimpleStoreKey } from './shared-with-frontend/simple-store.const';
 
 let mainWin: BrowserWindow;
 
+/**
+ * Returns theme-aware background color for titlebar overlay.
+ * Semi-transparent to ensure window controls are always visible.
+ */
+const getTitleBarColor = (isDark: boolean): string => {
+  // Dark: matches --bg (#131314) with 95% opacity
+  // Light: matches --bg (#f8f8f7) with 95% opacity
+  return isDark ? 'rgba(19, 19, 20, 0.95)' : 'rgba(248, 248, 247, 0.95)';
+};
+
 const mainWinModule: {
   win?: BrowserWindow;
   isAppReady: boolean;
@@ -91,7 +101,7 @@ export const createWindow = async ({
   const titleBarOverlay: BrowserWindowConstructorOptions['titleBarOverlay'] =
     isUseCustomWindowTitleBar && !IS_MAC
       ? {
-          color: '#00000000',
+          color: getTitleBarColor(nativeTheme.shouldUseDarkColors),
           symbolColor: initialSymbolColor,
           height: 44,
         }
@@ -224,13 +234,13 @@ export const createWindow = async ({
     mainWinModule.isAppReady = true;
   });
 
-  // Listen for theme changes to update title bar overlay symbol color
+  // Listen for theme changes to update title bar overlay color and symbol
   if (isUseCustomWindowTitleBar && !IS_MAC) {
     ipcMain.on(IPC.UPDATE_TITLE_BAR_DARK_MODE, (ev, isDarkMode: boolean) => {
       try {
         const symbolColor = isDarkMode ? '#fff' : '#000';
         mainWin.setTitleBarOverlay({
-          color: '#00000000',
+          color: getTitleBarColor(isDarkMode),
           symbolColor,
           height: 44,
         });

src/app/core-ui/main-header/main-header.component.scss

@@ -24,7 +24,11 @@
 }
 
 :host-context(.isObsidianStyleHeader.isElectron) {
-  padding-right: var(--window-controls-width); // Space for window controls
+  // Dynamic window controls width using Window Controls Overlay CSS env vars
+  // env(titlebar-area-width) = available width (viewport - controls)
+  // So: controls width = 100vw - titlebar-area-width
+  // Fallback calc ensures 140px when env vars unavailable
+  padding-right: calc(100vw - env(titlebar-area-width, calc(100vw - 140px)));
 }
 
 :host-context(.isMac.isElectron),

src/styles/_css-variables.scss

@@ -55,7 +55,7 @@
   --mat-mini-fab-size: 48px;
   --mac-title-bar-padding: 20px;
   --card-border-radius: 4px;
-  --window-controls-width: 96px;
+  --window-controls-width: 140px; // Fallback for non-WCO contexts; main-header uses env() directly
 
   // Z-index layers
   --z-focus-mode-overlay: 101;