From 76673ebe8b77b1752fd57bfc5b80dfdefe5c4889 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 25 Apr 2023 16:45:35 +0200
Subject: [PATCH] [PM-1541] Adjust the dialogs max-width (#5036)

---
 .../member-dialog/member-dialog.component.html       |  2 +-
 .../secrets/dialog/secret-dialog.component.html      |  2 +-
 .../dialog/sm-import-error-dialog.component.html     |  6 ++++--
 .../src/dialog/dialog/dialog.component.html          |  2 +-
 .../components/src/dialog/dialog/dialog.component.ts | 12 ++++++++----
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
index de5384c63b7..aff68c010fb 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog [disablePadding]="!loading">
+  <bit-dialog [disablePadding]="!loading" dialogSize="large">
     <span bitDialogTitle>
       {{ title }}
       <span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html
index f511123f6f2..a7bfd1d8bee 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="default">
+  <bit-dialog dialogSize="large">
     <ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
     <div bitDialogContent class="tw-relative">
       <div
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/settings/dialog/sm-import-error-dialog.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/settings/dialog/sm-import-error-dialog.component.html
index ea1bc9288a5..9afbc351443 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/settings/dialog/sm-import-error-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/settings/dialog/sm-import-error-dialog.component.html
@@ -1,4 +1,4 @@
-<bit-dialog>
+<bit-dialog dialogSize="large">
   <span bitDialogTitle>
     {{ "importError" | i18n }}
   </span>
@@ -13,7 +13,9 @@
       </ng-container>
       <ng-template body>
         <tr bitRow *ngFor="let line of errorLines">
-          <td bitCell class="tw-break-all">[{{ line.id }}] [{{ line.type }}] {{ line.key }}</td>
+          <td bitCell class="tw-whitespace-nowrap">
+            [{{ line.id }}] [{{ line.type }}] {{ line.key }}
+          </td>
           <td bitCell>{{ line.errorMessage }}</td>
         </tr>
       </ng-template>
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index ab158139c86..963e600aa2c 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -1,6 +1,6 @@
 <div
+  class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
   [ngClass]="width"
-  class="tw-flex tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
   @fadeIn
 >
   <div
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index 937f0336682..eac833cf2b8 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -19,18 +19,22 @@ export class DialogComponent {
     return this._disablePadding;
   }
 
-  @HostBinding("class") classes = ["tw-flex", "tw-flex-col", "tw-py-4", "tw-max-h-screen"];
+  @HostBinding("class") get classes() {
+    return ["tw-flex", "tw-flex-col", "tw-max-h-screen", "tw-w-screen", "tw-p-4"].concat(
+      this.width
+    );
+  }
 
   get width() {
     switch (this.dialogSize) {
       case "small": {
-        return "tw-w-96";
+        return "tw-max-w-sm";
       }
       case "large": {
-        return "tw-w-75vw";
+        return "tw-max-w-3xl";
       }
       default: {
-        return "tw-w-50vw";
+        return "tw-max-w-xl";
       }
     }
   }