[PM-17091][PM-17043] Support system zoom in browser extension (#14435)

apps/browser/src/platform/popup/layout/popup-size.service.ts

@@ -50,17 +50,40 @@ export class PopupSizeService {
       PopupSizeService.setStyle(width);
       localStorage.setItem(PopupSizeService.LocalStorageKey, width);
     });
+  }
 
+  async setHeight() {
     const isInChromeTab = await BrowserPopupUtils.isInTab();
 
+    /**
+     * To support both browser default zoom and system default zoom, we need to take into account
+     * the full screen height. When system default zoom is >100%, window.innerHeight still outputs
+     * a height equivalent to what it would be at 100%, which can cause the extension window to
+     * render as too tall. So if the screen height is smaller than the max possible extension height,
+     * we should use that to set our extension height. Otherwise, we want to use the window.innerHeight
+     * to support browser zoom.
+     *
+     * This is basically a workaround for what we consider a bug with browsers reporting the wrong
+     * available innerHeight when system zoom is turned on. If that gets fixed, we can remove the code
+     * checking the screen height.
+     */
+    const MAX_EXT_HEIGHT = 600;
+    const extensionInnerHeight = window.innerHeight;
+    // Use a 100px offset when calculating screen height to account for browser container elements
+    const screenAvailHeight = window.screen.availHeight - 100;
+    const availHeight =
+      screenAvailHeight < MAX_EXT_HEIGHT ? screenAvailHeight : extensionInnerHeight;
+
     if (!BrowserPopupUtils.inPopup(window) || isInChromeTab) {
-      window.document.body.classList.add("body-full");
-    } else if (window.innerHeight < 400) {
-      window.document.body.classList.add("body-xxs");
-    } else if (window.innerHeight < 500) {
-      window.document.body.classList.add("body-xs");
-    } else if (window.innerHeight < 600) {
-      window.document.body.classList.add("body-sm");
+      window.document.documentElement.classList.add("body-full");
+    } else if (availHeight < 300) {
+      window.document.documentElement.classList.add("body-3xs");
+    } else if (availHeight < 400) {
+      window.document.documentElement.classList.add("body-xxs");
+    } else if (availHeight < 500) {
+      window.document.documentElement.classList.add("body-xs");
+    } else if (availHeight < 600) {
+      window.document.documentElement.classList.add("body-sm");
     }
   }
 

apps/browser/src/popup/app.component.ts

@@ -26,6 +26,7 @@ import {
 import { BiometricsService, BiometricStateService } from "@bitwarden/key-management";
 
 import { PopupCompactModeService } from "../platform/popup/layout/popup-compact-mode.service";
+import { PopupSizeService } from "../platform/popup/layout/popup-size.service";
 import { initPopupClosedListener } from "../platform/services/popup-view-cache-background.service";
 import { VaultBrowserStateService } from "../vault/services/vault-browser-state.service";
 
@@ -71,6 +72,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private biometricStateService: BiometricStateService,
     private biometricsService: BiometricsService,
     private deviceTrustToastService: DeviceTrustToastService,
+    private popupSizeService: PopupSizeService,
   ) {
     this.deviceTrustToastService.setupListeners$.pipe(takeUntilDestroyed()).subscribe();
   }
@@ -79,6 +81,7 @@ export class AppComponent implements OnInit, OnDestroy {
     initPopupClosedListener();
 
     this.compactModeService.init();
+    await this.popupSizeService.setHeight();
 
     // Component states must not persist between closing and reopening the popup, otherwise they become dead objects
     // Clear them aggressively to make sure this doesn't occur

apps/browser/src/popup/scss/base.scss

@@ -8,6 +8,34 @@
 
 html {
   overflow: hidden;
+  min-height: 600px;
+  height: 100%;
+
+  &.body-sm {
+    min-height: 500px;
+  }
+
+  &.body-xs {
+    min-height: 400px;
+  }
+
+  &.body-xxs {
+    min-height: 300px;
+  }
+
+  &.body-3xs {
+    min-height: 240px;
+  }
+
+  &.body-full {
+    min-height: unset;
+    width: 100%;
+    height: 100%;
+
+    & body {
+      width: 100%;
+    }
+  }
 }
 
 html,
@@ -20,9 +48,9 @@ body {
 
 body {
   width: 380px;
-  height: 600px;
+  height: 100%;
   position: relative;
-  min-height: 100vh;
+  min-height: inherit;
   overflow: hidden;
   color: $text-color;
   background-color: $background-color;
@@ -31,23 +59,6 @@ body {
     color: themed("textColor");
     background-color: themed("backgroundColor");
   }
-
-  &.body-sm {
-    height: 500px;
-  }
-
-  &.body-xs {
-    height: 400px;
-  }
-
-  &.body-xxs {
-    height: 300px;
-  }
-
-  &.body-full {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 h1,