[CL-672] update mobile design of dialog (#14828)

--------- Co-authored-by: Vicki League <vleague@bitwarden.com>
2025-12-06 00:13:28 +00:00 · 2025-11-13 18:59:03 -08:00
parent 9a3ba9e05b
commit a55d0f02f2
30 changed files with 255 additions and 53 deletions
--- a/apps/browser/src/auth/popup/settings/await-desktop-dialog.component.ts
+++ b/apps/browser/src/auth/popup/settings/await-desktop-dialog.component.ts
@@ -1,7 +1,12 @@
 import { Component } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import {
+  ButtonModule,
+  CenterPositionStrategy,
+  DialogModule,
+  DialogService,
+} from "@bitwarden/components";

 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -11,6 +16,8 @@ import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components
 })
 export class AwaitDesktopDialogComponent {
  static open(dialogService: DialogService) {
-    return dialogService.open<boolean>(AwaitDesktopDialogComponent);
+    return dialogService.open<boolean>(AwaitDesktopDialogComponent, {
+      positionStrategy: new CenterPositionStrategy(),
+    });
  }
 }
--- a/apps/browser/src/popup/components/desktop-sync-verification-dialog.component.ts
+++ b/apps/browser/src/popup/components/desktop-sync-verification-dialog.component.ts
@@ -9,6 +9,7 @@ import {
  ButtonModule,
  DialogModule,
  DialogService,
+  CenterPositionStrategy,
 } from "@bitwarden/components";

 export type DesktopSyncVerificationDialogParams = {
@@ -49,6 +50,7 @@ export class DesktopSyncVerificationDialogComponent implements OnDestroy, OnInit
  static open(dialogService: DialogService, data: DesktopSyncVerificationDialogParams) {
    return dialogService.open(DesktopSyncVerificationDialogComponent, {
      data,
+      positionStrategy: new CenterPositionStrategy(),
    });
  }
 }
--- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts
@@ -3,7 +3,7 @@ import { Component, input, OnInit } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { DialogService } from "@bitwarden/components";
+import { CenterPositionStrategy, DialogService } from "@bitwarden/components";
 import { SendFormConfig } from "@bitwarden/send-ui";

 import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
@@ -33,7 +33,9 @@ export class SendFilePopoutDialogContainerComponent implements OnInit {
      this.config().mode === "add" &&
      this.filePopoutUtilsService.showFilePopoutMessage(window)
    ) {
-      this.dialogService.open(SendFilePopoutDialogComponent);
+      this.dialogService.open(SendFilePopoutDialogComponent, {
+        positionStrategy: new CenterPositionStrategy(),
+      });
    }
  }
 }
--- a/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts
+++ b/apps/browser/src/tools/popup/settings/about-page/about-page-v2.component.ts
@@ -7,7 +7,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { DeviceType } from "@bitwarden/common/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService, ItemModule } from "@bitwarden/components";
+import { CenterPositionStrategy, DialogService, ItemModule } from "@bitwarden/components";

 import { BrowserApi } from "../../../../platform/browser/browser-api";
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
@@ -51,7 +51,9 @@ export class AboutPageV2Component {
  ) {}

  about() {
-    this.dialogService.open(AboutDialogComponent);
+    this.dialogService.open(AboutDialogComponent, {
+      positionStrategy: new CenterPositionStrategy(),
+    });
  }

  async launchHelp() {
--- a/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.ts
@@ -7,6 +7,7 @@ import {
  DialogModule,
  DialogService,
  TypographyModule,
+  CenterPositionStrategy,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import { DarkImageSourceDirective, VaultCarouselModule } from "@bitwarden/vault";
@@ -52,6 +53,7 @@ export class AtRiskCarouselDialogComponent {
  static open(dialogService: DialogService) {
    return dialogService.open<AtRiskCarouselDialogResult>(AtRiskCarouselDialogComponent, {
      disableClose: true,
+      positionStrategy: new CenterPositionStrategy(),
    });
  }
 }
--- a/apps/desktop/src/app/components/browser-sync-verification-dialog.component.ts
+++ b/apps/desktop/src/app/components/browser-sync-verification-dialog.component.ts
@@ -1,7 +1,13 @@
 import { Component, Inject } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { DIALOG_DATA, ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import {
+  DIALOG_DATA,
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  CenterPositionStrategy,
+} from "@bitwarden/components";

 export type BrowserSyncVerificationDialogParams = {
  fingerprint: string[];
@@ -19,6 +25,7 @@ export class BrowserSyncVerificationDialogComponent {
  static open(dialogService: DialogService, data: BrowserSyncVerificationDialogParams) {
    return dialogService.open(BrowserSyncVerificationDialogComponent, {
      data,
+      positionStrategy: new CenterPositionStrategy(),
    });
  }
 }
--- a/apps/desktop/src/app/components/verify-native-messaging-dialog.component.ts
+++ b/apps/desktop/src/app/components/verify-native-messaging-dialog.component.ts
@@ -1,7 +1,13 @@
 import { Component, Inject } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { DIALOG_DATA, ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import {
+  DIALOG_DATA,
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  CenterPositionStrategy,
+} from "@bitwarden/components";

 export type VerifyNativeMessagingDialogData = {
  applicationName: string;
@@ -19,6 +25,7 @@ export class VerifyNativeMessagingDialogComponent {
  static open(dialogService: DialogService, data: VerifyNativeMessagingDialogData) {
    return dialogService.open<boolean>(VerifyNativeMessagingDialogComponent, {
      data,
+      positionStrategy: new CenterPositionStrategy(),
    });
  }
 }
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/vnext-organization-data-ownership.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/vnext-organization-data-ownership.component.ts
@@ -9,7 +9,7 @@ import { EncryptService } from "@bitwarden/common/key-management/crypto/abstract
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { OrgKey } from "@bitwarden/common/types/key";
-import { DialogService } from "@bitwarden/components";
+import { CenterPositionStrategy, DialogService } from "@bitwarden/components";
 import { EncString } from "@bitwarden/sdk-internal";

 import { SharedModule } from "../../../../shared";
@@ -58,7 +58,9 @@ export class vNextOrganizationDataOwnershipPolicyComponent

  override async confirm(): Promise<boolean> {
    if (this.policyResponse?.enabled && !this.enabled.value) {
-      const dialogRef = this.dialogService.open(this.warningContent);
+      const dialogRef = this.dialogService.open(this.warningContent, {
+        positionStrategy: new CenterPositionStrategy(),
+      });
      const result = await lastValueFrom(dialogRef.closed);
      return Boolean(result);
    }
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector-dialog.stories.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector-dialog.stories.ts
@@ -25,7 +25,7 @@ const render: Story["render"] = (args) => ({
    ...args,
  },
  template: `
-    <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
+    <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding" disableAnimations>
      <span bitDialogTitle>Access selector</span>
      <span bitDialogContent>
        <bit-access-selector
--- a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts
+++ b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts
@@ -28,7 +28,7 @@ class MockUpgradeNavButtonComponent {}
 Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
+    matches: true,
    media: query,
    onchange: null,
    addListener: jest.fn(), // deprecated
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
@@ -16,6 +16,7 @@ import { getWebStoreUrl } from "@bitwarden/common/vault/utils/get-web-store-url"
 import {
  AnonLayoutWrapperDataService,
  ButtonComponent,
+  CenterPositionStrategy,
  DialogRef,
  DialogService,
  IconModule,
@@ -151,6 +152,7 @@ export class SetupExtensionComponent implements OnInit, OnDestroy {
        data: {
          onDismiss: this.dismissExtensionPage.bind(this),
        },
+        positionStrategy: new CenterPositionStrategy(),
      },
    );
  }
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -48,6 +48,7 @@ import {
  DialogService,
  ItemModule,
  ToastService,
+  CenterPositionStrategy,
 } from "@bitwarden/components";
 import {
  AttachmentDialogCloseResult,
@@ -331,6 +332,7 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
      if (this.cipher.decryptionFailure) {
        this.dialogService.open(DecryptionFailureDialogComponent, {
          data: { cipherIds: [this.cipher.id] },
+          positionStrategy: new CenterPositionStrategy(),
        });
        this.dialogRef.close();
        return;
--- a/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.ts
+++ b/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.ts
@@ -14,6 +14,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { CipherBulkDeleteRequest } from "@bitwarden/common/vault/models/request/cipher-bulk-delete.request";
 import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
 import {
+  CenterPositionStrategy,
  DIALOG_DATA,
  DialogConfig,
  DialogRef,
@@ -48,7 +49,10 @@ export const openBulkDeleteDialog = (
 ) => {
  return dialogService.open<BulkDeleteDialogResult, BulkDeleteDialogParams>(
    BulkDeleteDialogComponent,
-    config,
+    {
+      positionStrategy: new CenterPositionStrategy(),
+      ...config,
+    },
  );
 };