Refactor revoke/restore modal layout, truncate email addresses

bitwarden · Jan 7, 2025 · 3f828c5 · 3f828c5
1 parent 1075d7a
commit 3f828c5
Showing 1 changed file with 20 additions and 32 deletions.
diff --git a/...pp/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html b/...pp/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
@@ -34,22 +34,18 @@ <h1>{{ bulkTitle }}</h1>
       <bit-table *ngIf="accountDeprovisioning.enabled">
         <ng-container header>
           <tr>
-            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell colspan="2" class="tw-w-1/2">{{ "member" | i18n }}</th>
             <th bitCell *ngIf="this.showNoMasterPasswordWarning">{{ "details" | i18n }}</th>
           </tr>
         </ng-container>
         <ng-template body>
           <tr bitRow *ngFor="let user of users">
             <td bitCell width="30">
-              <div class="tw-flex tw-items-center">
-                <div class="tw-flex tw-items-center tw-mr-6">
-                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-                </div>
-                <div>
-                  {{ user.email }}
-                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
-                </div>
-              </div>
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell class="tw-w-full tw-max-w-0">
+              <div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
             <td bitCell *ngIf="this.showNoMasterPasswordWarning">
               <span class="tw-block tw-lowercase tw-text-muted">
@@ -76,8 +72,8 @@ <h1>{{ bulkTitle }}</h1>
             <td bitCell width="30">
               <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
             </td>
-            <td bitCell>
-              {{ user.email }}
+            <td bitCell class="tw-w-full tw-max-w-0">
+              <div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
               <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
             <td bitCell *ngIf="this.showNoMasterPasswordWarning">
@@ -98,22 +94,18 @@ <h1>{{ bulkTitle }}</h1>
       <bit-table *ngIf="accountDeprovisioning.enabled">
         <ng-container header>
           <tr>
-            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell colspan="2" class="tw-w-1/2">{{ "member" | i18n }}</th>
             <th bitCell>{{ "status" | i18n }}</th>
           </tr>
         </ng-container>
         <ng-template body>
           <tr bitRow *ngFor="let user of users">
             <td bitCell width="30">
-              <div class="tw-flex tw-items-center">
-                <div class="tw-flex tw-items-center tw-mr-6">
-                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-                </div>
-                <div>
-                  {{ user.email }}
-                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
-                </div>
-              </div>
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell class="tw-w-full tw-max-w-0">
+              <div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
             <td bitCell *ngIf="statuses.has(user.id)">
               {{ statuses.get(user.id) }}
@@ -128,22 +120,18 @@ <h1>{{ bulkTitle }}</h1>
       <bit-table *ngIf="!accountDeprovisioning.enabled">
         <ng-container header>
           <tr>
-            <th bitCell class="tw-w-1/2">{{ "member" | i18n }}</th>
+            <th bitCell colspan="2" class="tw-w-1/2">{{ "member" | i18n }}</th>
             <th bitCell>{{ "status" | i18n }}</th>
           </tr>
         </ng-container>
         <ng-template body>
           <tr bitRow *ngFor="let user of users">
             <td bitCell width="30">
-              <div class="tw-flex tw-items-center">
-                <div class="tw-flex tw-items-center tw-mr-6">
-                  <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
-                </div>
-                <div>
-                  {{ user.email }}
-                  <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
-                </div>
-              </div>
+              <bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
+            </td>
+            <td bitCell class="tw-w-full tw-max-w-0">
+              <div class="tw-truncate" [title]="user.email">{{ user.email }}</div>
+              <small class="tw-block tw-text-muted" *ngIf="user.name">{{ user.name }}</small>
             </td>
             <td bitCell *ngIf="statuses.has(user.id)">
               {{ statuses.get(user.id) }}