Merge branch 'fix-content-height'

2 files changed, 54 insertions, 12 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 43807de5c3..6b8f3969ad 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -1495,27 +1495,51 @@ class ApplicationMain {
     }
   }
 
-  private async createWindow(): Promise<BrowserWindow> {
+  // On both Linux and Windows the app height is applied incorrectly:
+  // https://github.com/electron/electron/issues/28777
+  private getContentHeight(): number {
+    // The height we want achieve.
     const contentHeight = 568;
-    // the size of transparent area around arrow on macOS
-    const headerBarArrowHeight = 12;
-    const height =
-      process.platform === 'darwin' && !this.guiSettings.unpinnedWindow
-        ? contentHeight + headerBarArrowHeight
-        : contentHeight;
+
+    switch (process.platform) {
+      case 'darwin': {
+        // The size of transparent area around arrow on macOS.
+        const headerBarArrowHeight = 12;
+
+        return this.guiSettings.unpinnedWindow
+          ? contentHeight
+          : contentHeight + headerBarArrowHeight;
+      }
+      case 'win32':
+        // On Windows the app height ends up slightly lower than we set it to if running in unpinned
+        // mode and the app becomes a tiny bit taller when pinned to task bar.
+        return this.guiSettings.unpinnedWindow ? contentHeight + 19 : contentHeight - 1;
+      case 'linux':
+        // On Linux the app ends up slightly lower than we set it to.
+        return contentHeight - 25;
+      default:
+        return contentHeight;
+    }
+  }
+
+  private async createWindow(): Promise<BrowserWindow> {
+    const height = this.getContentHeight();
+    const width = 320;
 
     const options: Electron.BrowserWindowConstructorOptions = {
-      width: 320,
-      minWidth: 320,
+      useContentSize: true,
+      width,
+      minWidth: width,
+      maxWidth: width,
       height,
       minHeight: height,
+      maxHeight: height,
       resizable: false,
       maximizable: false,
       fullscreenable: false,
       show: false,
       frame: this.guiSettings.unpinnedWindow,
       transparent: !this.guiSettings.unpinnedWindow,
-      useContentSize: true,
       webPreferences: {
         preload: path.join(__dirname, '../renderer/preloadBundle.js'),
         nodeIntegration: false,
@@ -1534,8 +1558,6 @@ class ApplicationMain {
         // setup window flags to mimic popover on macOS
         const appWindow = new BrowserWindow({
           ...options,
-          height: contentHeight + headerBarArrowHeight,
-          minHeight: contentHeight + headerBarArrowHeight,
           titleBarStyle: this.guiSettings.unpinnedWindow ? 'default' : 'customButtonsOnHover',
           minimizable: this.guiSettings.unpinnedWindow,
           closable: this.guiSettings.unpinnedWindow,
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 6f656c5dfe..7627428059 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -240,6 +240,8 @@ export default class AppRenderer {
     if (initialState.isConnected) {
       consumePromise(this.onDaemonConnected());
     }
+
+    this.checkContentHeight();
   }
 
   public renderView() {
@@ -520,6 +522,24 @@ export default class AppRenderer {
     return preferredLocale ? preferredLocale.name : '';
   }
 
+  // Make sure that the content height is correct and log if it isn't. This is mostly for debugging
+  // purposes since there's a bug in Electron that causes the app height to be another value than
+  // the one we have set.
+  // https://github.com/electron/electron/issues/28777
+  private checkContentHeight(): void {
+    let expectedContentHeight = 568;
+
+    // The app content is 12px taller on macOS to fit the top arrow.
+    if (window.platform === 'darwin' && !this.guiSettings.unpinnedWindow) {
+      expectedContentHeight += 12;
+    }
+
+    const contentHeight = window.innerHeight;
+    if (contentHeight !== expectedContentHeight) {
+      log.error(`Wrong content height ${contentHeight}, expected ${expectedContentHeight}`);
+    }
+  }
+
   private redirectToConnect() {
     // Redirect the user after some time to allow for the 'Logged in' screen to be visible
     this.loginScheduler.schedule(() => this.resetNavigation(), 1000);