[PM-1541] Adjust the dialogs max-width (#5036)

bitwarden · Apr 25, 2023 · 76673eb · 76673eb
1 parent 85277aa
commit 76673eb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git a/...admin-console/organizations/members/components/member-dialog/member-dialog.component.html b/...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/...arden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html b/...arden_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/...nse/bit-web/src/app/secrets-manager/settings/dialog/sm-import-error-dialog.component.html b/...nse/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
@@ -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
@@ -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";
       }
     }
   }