Shift titlebar on Windows 11

app/main.ts

@@ -636,9 +636,8 @@ async function getTitleBarOverlay(): Promise<TitleBarOverlayOptions | false> {
     color,
     symbolColor,
 
-    // Should match stylesheets/components/TitleBarContainer.scss minus the
-    // border
-    height: (OS.isWindows11() ? 29 : 28) - 1,
+    // Should match stylesheets/components/TitleBarContainer.scss
+    height: 28,
   };
 }
 

package.json

@@ -77,7 +77,7 @@
     "fs-xattr": "0.3.0"
   },
   "dependencies": {
-    "@indutny/frameless-titlebar": "2.3.0",
+    "@indutny/frameless-titlebar": "2.3.1",
     "@popperjs/core": "2.9.2",
     "@react-spring/web": "9.4.5",
     "@signalapp/libsignal-client": "0.17.0",

stylesheets/_titlebar.scss

@@ -21,13 +21,6 @@ body {
 
   &.os-windows:not(.full-screen) {
     --titlebar-height: calc(28px / var(--zoom-factor));
-
-    // Account for border eating one pixel out of the titlebar and making it
-    // look unbalanced
-    &.os-windows-11 {
-      --titlebar-height: calc((28px + 1px) / var(--zoom-factor));
-    }
-
     --window-height: calc(100vh - var(--titlebar-height));
   }
 }

stylesheets/components/TitleBarContainer.scss

@@ -23,6 +23,12 @@
     & button {
       font-family: inherit;
     }
+
+    // Shift titlebar down 1px on Windows 11 because otherwise window border
+    // will cover it.
+    &--extra-padding {
+      padding-top: 1px;
+    }
   }
 
   &__content {

ts/components/TitleBarContainer.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react';
 import TitleBar from '@indutny/frameless-titlebar';
 import type { MenuItem } from '@indutny/frameless-titlebar';
 import type { MenuItemConstructorOptions } from 'electron';
+import classNames from 'classnames';
 
 import { createTemplate } from '../../app/menu';
 import { ThemeType } from '../types/Util';
@@ -129,7 +130,7 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
     () => ({
       bar: {
         // See stylesheets/_global.scss
-        height: isWindows11 ? TITLEBAR_HEIGHT + 1 : TITLEBAR_HEIGHT,
+        height: TITLEBAR_HEIGHT,
         palette:
           theme === ThemeType.light ? ('light' as const) : ('dark' as const),
         ...(theme === ThemeType.dark
@@ -197,7 +198,7 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
         return `calc(${value} * var(--zoom-factor))`;
       },
     }),
-    [theme, isWindows11, hideMenuBar]
+    [theme, hideMenuBar]
   );
 
   if (platform !== 'win32' || isFullScreen) {
@@ -237,7 +238,14 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
   return (
     <div className="TitleBarContainer">
       <TitleBar
-        className="TitleBarContainer__title"
+        className={classNames(
+          'TitleBarContainer__title',
+
+          // Add a pixel of padding on non-maximized Windows 11 titlebar.
+          isWindows11 && !isMaximized
+            ? 'TitleBarContainer__title--extra-padding'
+            : null
+        )}
         platform={platform}
         iconSrc={iconSrc}
         theme={titleBarTheme}

ts/set_os_class.ts

@@ -5,9 +5,6 @@
   let className: string;
   if (window.SignalContext.OS.isWindows()) {
     className = 'os-windows';
-    if (window.SignalContext.OS.isWindows11()) {
-      document.body.classList.add('os-windows-11');
-    }
   } else if (window.SignalContext.OS.isMacOS()) {
     className = 'os-macos';
   } else if (window.SignalContext.OS.isLinux()) {

yarn.lock

@@ -1378,10 +1378,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@indutny/frameless-titlebar@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.0.tgz#79a99bb62b5a5cba562e1ea87a5259600e479caf"
-  integrity sha512-m87TCUcmdsiaV3fDGBBYdiTYiW0PzMVqjvmfymN/56Op3us70pizSR94QHr+Z3DPkW4GgrGU2XMeJYZnAI2NkQ==
+"@indutny/frameless-titlebar@2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.1.tgz#adfe7dc6686dada6e3593f045ca401e08265f3b1"
+  integrity sha512-1Hvz1OtGxx28FaryC017qDv+4r0dq78MCTupTkBsgZmkl+5i5HUc6U1hxZJcsPQ3bukkxFisgArNsSPEfnjb/g==
   dependencies:
     classnames "^2.2.6"
     deepmerge "^4.2.2"