[PM-25082] - update browser extension widths (#18376)

* update browser extension widths

* use PopupWidthOptions where possible

apps/browser/src/_locales/en/messages.json

@@ -5673,6 +5673,9 @@
   "extraWide": {
     "message": "Extra wide"
   },
+  "narrow": {
+    "message": "Narrow"
+  },
   "sshKeyWrongPassword": {
     "message": "The password you entered is incorrect."
   },

apps/browser/src/platform/browser/browser-popup-utils.spec.ts

@@ -1,7 +1,7 @@
 import { createChromeTabMock } from "../../autofill/spec/autofill-mocks";
 
 import { BrowserApi } from "./browser-api";
-import BrowserPopupUtils from "./browser-popup-utils";
+import BrowserPopupUtils, { PopupWidthOptions } from "./browser-popup-utils";
 
 describe("BrowserPopupUtils", () => {
   afterEach(() => {
@@ -152,7 +152,7 @@ describe("BrowserPopupUtils", () => {
         focused: false,
         alwaysOnTop: false,
         incognito: false,
-        width: 380,
+        width: PopupWidthOptions.default,
       });
       jest.spyOn(BrowserApi, "createWindow").mockImplementation();
       jest.spyOn(BrowserApi, "updateWindowProperties").mockImplementation();
@@ -168,7 +168,7 @@ describe("BrowserPopupUtils", () => {
       expect(BrowserApi.createWindow).toHaveBeenCalledWith({
         type: "popup",
         focused: true,
-        width: 380,
+        width: PopupWidthOptions.default,
         height: 630,
         left: 85,
         top: 190,
@@ -197,7 +197,7 @@ describe("BrowserPopupUtils", () => {
       expect(BrowserApi.createWindow).toHaveBeenCalledWith({
         type: "popup",
         focused: true,
-        width: 380,
+        width: PopupWidthOptions.default,
         height: 630,
         left: 85,
         top: 190,
@@ -214,7 +214,7 @@ describe("BrowserPopupUtils", () => {
       expect(BrowserApi.createWindow).toHaveBeenCalledWith({
         type: "popup",
         focused: true,
-        width: 380,
+        width: PopupWidthOptions.default,
         height: 630,
         left: 85,
         top: 190,
@@ -267,7 +267,7 @@ describe("BrowserPopupUtils", () => {
       expect(BrowserApi.createWindow).toHaveBeenCalledWith({
         type: "popup",
         focused: true,
-        width: 380,
+        width: PopupWidthOptions.default,
         height: 630,
         left: 85,
         top: 190,
@@ -290,7 +290,7 @@ describe("BrowserPopupUtils", () => {
         focused: false,
         alwaysOnTop: false,
         incognito: false,
-        width: 380,
+        width: PopupWidthOptions.default,
         state: "fullscreen",
       });
       jest
@@ -321,7 +321,7 @@ describe("BrowserPopupUtils", () => {
         focused: false,
         alwaysOnTop: false,
         incognito: false,
-        width: 380,
+        width: PopupWidthOptions.default,
         state: "fullscreen",
       });
 

apps/browser/src/platform/browser/browser-popup-utils.ts

@@ -10,9 +10,9 @@ import { BrowserApi } from "./browser-api";
  * Value represents width in pixels
  */
 export const PopupWidthOptions = Object.freeze({
-  default: 380,
-  wide: 480,
-  "extra-wide": 600,
+  default: 480,
+  wide: 600,
+  narrow: 380,
 });
 
 type PopupWidthOptions = typeof PopupWidthOptions;

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -44,7 +44,7 @@ import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
 @Component({
   selector: "extension-container",
   template: `
-    <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+    <div class="tw-h-[640px] tw-w-[480px] tw-border tw-border-solid tw-border-secondary-300">
       <ng-content></ng-content>
     </div>
   `,
@@ -678,7 +678,7 @@ export const WidthOptions: Story = {
     template: /* HTML */ `
       <div class="tw-flex tw-flex-col tw-gap-4 tw-text-main">
         <div>Default:</div>
-        <div class="tw-h-[640px] tw-w-[380px] tw-border tw-border-solid tw-border-secondary-300">
+        <div class="tw-h-[640px] tw-w-[480px] tw-border tw-border-solid tw-border-secondary-300">
           <mock-vault-page></mock-vault-page>
         </div>
         <div>Wide:</div>

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

@@ -83,7 +83,7 @@ export class PopupSizeService {
     }
     const pxWidth = PopupWidthOptions[width] ?? PopupWidthOptions.default;
 
-    document.body.style.minWidth = `${pxWidth}px`;
+    document.body.style.width = `${pxWidth}px`;
   }
 
   /**

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -10,6 +10,7 @@ import {
 import { of } from "rxjs";
 
 import { LockIcon, RegistrationCheckEmailIcon } from "@bitwarden/assets/svg";
+import { PopupWidthOptions } from "@bitwarden/browser/platform/browser/browser-popup-utils";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service";
@@ -243,7 +244,12 @@ export const DefaultContentExample: Story = {
   }),
   parameters: {
     chromatic: {
-      viewports: [380, 1280],
+      viewports: [
+        PopupWidthOptions.default,
+        PopupWidthOptions.narrow,
+        PopupWidthOptions.wide,
+        1280,
+      ],
     },
   },
 };

apps/browser/src/popup/scss/tailwind.css

@@ -60,7 +60,7 @@
   }
 
   body {
-    width: 380px;
+    width: 480px;
     height: 100%;
     position: relative;
     min-height: inherit;
@@ -84,9 +84,9 @@
     animation: redraw 1s linear infinite;
   }
 
-  /** 
+  /**
    * Text selection style:
-   * suppress user selection for most elements (to make it more app-like) 
+   * suppress user selection for most elements (to make it more app-like)
    */
   h1,
   h2,
@@ -165,7 +165,7 @@
     @apply tw-text-muted;
   }
 
-  /** 
+  /**
    * Text selection style:
    * Set explicit selection styles (assumes primary accent color has sufficient
    * contrast against the background, so its inversion is also still readable)

apps/browser/src/vault/popup/settings/appearance-v2.component.ts

@@ -79,7 +79,7 @@ export class AppearanceV2Component implements OnInit {
   protected readonly widthOptions: Option<PopupWidthOption>[] = [
     { label: this.i18nService.t("default"), value: "default" },
     { label: this.i18nService.t("wide"), value: "wide" },
-    { label: this.i18nService.t("extraWide"), value: "extra-wide" },
+    { label: this.i18nService.t("narrow"), value: "narrow" },
   ];
 
   constructor(