[PM-23082] The v3 notification is using the v2 notification sizing in some cases (#15370)

* PM-23082

* add tests

apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts

@@ -44,6 +44,40 @@ describe("OverlayNotificationsContentService", () => {
       expect(bodyAppendChildSpy).not.toHaveBeenCalled();
     });
 
+    it("applies correct styles when notificationRefreshFlag is true", async () => {
+      overlayNotificationsContentService["notificationRefreshFlag"] = true;
+
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      const barElement = overlayNotificationsContentService["notificationBarElement"]!;
+      expect(barElement.style.height).toBe("400px");
+      expect(barElement.style.right).toBe("0px");
+    });
+
+    it("applies correct styles when notificationRefreshFlag is false", async () => {
+      overlayNotificationsContentService["notificationRefreshFlag"] = false;
+
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      const barElement = overlayNotificationsContentService["notificationBarElement"]!;
+      expect(barElement.style.height).toBe("82px");
+      expect(barElement.style.right).toBe("10px");
+    });
+
     it("closes the notification bar if the notification bar type has changed", async () => {
       overlayNotificationsContentService["currentNotificationBarType"] = "add";
       const closeNotificationBarSpy = jest.spyOn(

apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts

@@ -21,24 +21,32 @@ export class OverlayNotificationsContentService
   private notificationBarIframeElement: HTMLIFrameElement | null = null;
   private currentNotificationBarType: NotificationType | null = null;
   private notificationRefreshFlag: boolean = false;
-  private notificationBarElementStyles: Partial<CSSStyleDeclaration> = {
+  private getNotificationBarStyles(): Partial<CSSStyleDeclaration> {
-    height: "82px",
+    const styles: Partial<CSSStyleDeclaration> = {
-    width: "430px",
+      height: "400px",
-    maxWidth: "calc(100% - 20px)",
+      width: "430px",
-    minHeight: "initial",
+      maxWidth: "calc(100% - 20px)",
-    top: "10px",
+      minHeight: "initial",
-    right: "10px",
+      top: "10px",
-    padding: "0",
+      right: "0px",
-    position: "fixed",
+      padding: "0",
-    zIndex: "2147483647",
+      position: "fixed",
-    visibility: "visible",
+      zIndex: "2147483647",
-    borderRadius: "4px",
+      visibility: "visible",
-    border: "none",
+      borderRadius: "4px",
-    backgroundColor: "transparent",
+      border: "none",
-    overflow: "hidden",
+      backgroundColor: "transparent",
-    transition: "box-shadow 0.15s ease",
+      overflow: "hidden",
-    transitionDelay: "0.15s",
+      transition: "box-shadow 0.15s ease",
-  };
+      transitionDelay: "0.15s",
+    };
+
+    if (!this.notificationRefreshFlag) {
+      styles.height = "82px";
+      styles.right = "10px";
+    }
+    return styles;
+  }
   private notificationBarIframeElementStyles: Partial<CSSStyleDeclaration> = {
     width: "100%",
     height: "100%",
@@ -60,7 +68,6 @@ export class OverlayNotificationsContentService
     void sendExtensionMessage("checkNotificationQueue");
     void sendExtensionMessage("notificationRefreshFlagValue").then((notificationRefreshFlag) => {
       this.notificationRefreshFlag = !!notificationRefreshFlag;
-      this.setNotificationRefreshBarHeight();
     });
   }
 
@@ -233,32 +240,12 @@ export class OverlayNotificationsContentService
       this.notificationBarElement = globalThis.document.createElement("div");
       this.notificationBarElement.id = "bit-notification-bar";
 
-      setElementStyles(this.notificationBarElement, this.notificationBarElementStyles, true);
+      setElementStyles(this.notificationBarElement, this.getNotificationBarStyles(), true);
-      this.setNotificationRefreshBarHeight();
 
       this.notificationBarElement.appendChild(this.notificationBarIframeElement);
     }
   }
 
-  /**
-   * Sets the height of the notification bar based on the value of `notificationRefreshFlag`.
-   * If the flag is `true`, the bar is expanded to 400px and aligned right.
-   * If the flag is `false`, `null`, or `undefined`, it defaults to height of 82px.
-   * Skips if the notification bar element has not yet been created.
-   *
-   */
-  private setNotificationRefreshBarHeight() {
-    const isNotificationV3 = !!this.notificationRefreshFlag;
-
-    if (!this.notificationBarElement) {
-      return;
-    }
-
-    if (isNotificationV3) {
-      setElementStyles(this.notificationBarElement, { height: "400px", right: "0" }, true);
-    }
-  }
-
   /**
    * Sets up the message listener for the initialization of the notification bar.
    * This will send the initialization data to the notification bar iframe.