Counteract zoom-level changes in custom titlebar

package.json

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

stylesheets/_titlebar.scss

@@ -2,27 +2,30 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 body {
+  // Overriden by ts/background.ts
+  --zoom-factor: 1;
+
   // These should match the logic in `ts/types/Settings.ts`'s `getTitleBarVisibility`.
   //
   // It'd be great if we could use the `:fullscreen` selector here, but that does not seem
   //   to work with Electron, at least on macOS.
   --title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`.
   --draggable-app-region: initial;
-  &.os-macos:not(.full-screen) {
+  &.os-windows:not(.full-screen) {
-    --title-bar-drag-area-height: 28px;
+    --title-bar-drag-area-height: calc(28px / var(--zoom-factor));
     --draggable-app-region: drag;
   }
 
   --window-height: 100vh;
   --titlebar-height: 0px;
 
-  &.os-windows:not(.full-screen) {
+  &.os-macos:not(.full-screen) {
-    --titlebar-height: 28px;
+    --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);
+      --titlebar-height: calc((28px + 1px) / var(--zoom-factor));
     }
 
     --window-height: calc(100vh - var(--titlebar-height));

stylesheets/components/TitleBarContainer.scss

@@ -10,8 +10,10 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    width: calc(100vw * var(--zoom-factor));
     z-index: $z-index-window-controls;
+    transform: scale(calc(1 / var(--zoom-factor)));
+    transform-origin: 0 0;
 
     // This matches the inline styles of frameless-titlebar
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,

ts/background.ts

@@ -700,7 +700,16 @@ export async function startApp(): Promise<void> {
       },
     });
 
-    webFrame.setZoomFactor(window.Events.getZoomFactor());
+    const zoomFactor = window.Events.getZoomFactor();
+    webFrame.setZoomFactor(zoomFactor);
+    document.body.style.setProperty('--zoom-factor', zoomFactor.toString());
+
+    window.addEventListener('resize', () => {
+      document.body.style.setProperty(
+        '--zoom-factor',
+        webFrame.getZoomFactor().toString()
+      );
+    });
 
     // How long since we were last running?
     const lastHeartbeat = toDayMillis(window.storage.get('lastHeartbeat', 0));

ts/components/TitleBarContainer.tsx

@@ -171,6 +171,12 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
         opacity: 0,
       },
     },
+
+    // Zoom support
+    enableOverflow: false,
+    scalingFunction(value: string) {
+      return `calc(${value} * var(--zoom-factor))`;
+    },
   };
 
   return (

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.2.0":
+"@indutny/frameless-titlebar@2.3.0-rc.1":
-  version "2.2.0"
+  version "2.3.0-rc.1"
-  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.2.0.tgz#600ad754dda50105d2c4fe0de8bb25837eca1a8c"
+  resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.0-rc.1.tgz#95b11a29aecec025605a77b283f9494724566217"
-  integrity sha512-TJQ3ZJyUdtOAVIdGSV8GxXPPpt6WdlFtqwDAvgV2SbOXng5/uioSBd7iySyDA48suR7XCaa41V4/xp/E/5uVpg==
+  integrity sha512-QT8sZyjQ1fqeSon7Oop1uf5Zl2CmaXE82HD+b2QtkUUsNFpvwTD705hRSeaxjIkdnLOr0Q9FD5EgWqq72qP6+A==
   dependencies:
     classnames "^2.2.6"
     deepmerge "^4.2.2"