From de79d31e4a7c895b902075bfcf75bda2cffc3768 Mon Sep 17 00:00:00 2001
From: Leslie Xiong <lxiong@livefront.com>
Date: Sat, 24 Jan 2026 16:36:19 -0500
Subject: [PATCH] fixed spacing to align with send pages

---
 .../app/vault-v3/vault-list.component.html    | 171 +++++++++---------
 1 file changed, 87 insertions(+), 84 deletions(-)

diff --git a/apps/desktop/src/vault/app/vault-v3/vault-list.component.html b/apps/desktop/src/vault/app/vault-v3/vault-list.component.html
index e4183f6a2d4..43f11512181 100644
--- a/apps/desktop/src/vault/app/vault-v3/vault-list.component.html
+++ b/apps/desktop/src/vault/app/vault-v3/vault-list.component.html
@@ -1,93 +1,96 @@
 <cdk-virtual-scroll-viewport [itemSize]="RowHeight" bitScrollLayout class="tw-pb-8">
-  <div class="tw-px-8 tw-pt-6">
-    <app-header [title]="'vault' | i18n">
-      <vault-new-cipher-menu
-        [canCreateCipher]="true"
-        [canCreateFolder]="true"
-        [canCreateSshKey]="true"
-        (cipherAdded)="addCipher($event)"
-        (folderAdded)="addFolder()"
-      />
-    </app-header>
-  </div>
-  <div class="tw-mb-[16px]">
-    <app-search />
-  </div>
-  <bit-table [dataSource]="dataSource" layout="fixed">
-    <ng-container header>
-      <tr>
-        <!-- Individual or Organization vault -->
-        <th
-          bitCell
-          bitSortable="name"
-          [fn]="sortByName"
-          [class]="showExtraColumn ? 'tw-w-3/6' : 'tw-w-full'"
-        >
-          {{ "name" | i18n }}
-        </th>
-        @if (showOwner()) {
+  <div class="tw-mb-4 tw-px-6">
+    <div class="tw-px-2 tw-pt-6">
+      <app-header [title]="'vault' | i18n">
+        <vault-new-cipher-menu
+          [canCreateCipher]="true"
+          [canCreateFolder]="true"
+          [canCreateSshKey]="true"
+          (cipherAdded)="addCipher($event)"
+          (folderAdded)="addFolder()"
+        />
+      </app-header>
+    </div>
+    <div class="tw-mb-[16px]">
+      <app-search />
+    </div>
+    <bit-table [dataSource]="dataSource" layout="fixed">
+      <ng-container header>
+        <tr>
+          <!-- Individual or Organization vault -->
           <th
             bitCell
-            bitSortable="owner"
-            [fn]="sortByOwner"
-            class="tw-hidden tw-w-2/6 lg:tw-table-cell"
+            bitSortable="name"
+            [fn]="sortByName"
+            [class]="showExtraColumn ? 'tw-w-3/6' : 'tw-w-full'"
           >
-            {{ "owner" | i18n }}
+            {{ "name" | i18n }}
           </th>
-        }
-        <th bitCell class="tw-hidden tw-w-1/6 lg:tw-table-cell tw-text-right tw-font-medium">
-          {{ "options" | i18n }}
-        </th>
-      </tr>
-    </ng-container>
-    <ng-template body let-rows$>
-      <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 0">
-        @if (item.collection) {
-          <tr
-            bitRow
-            appVaultCollectionRow
-            alignContent="middle"
-            [disabled]="disabled()"
-            [collection]="item.collection"
-            [showOwner]="showOwner()"
-            [organizations]="allOrganizations()"
-          ></tr>
-        }
-        <!--
+          @if (showOwner()) {
+            <th
+              bitCell
+              bitSortable="owner"
+              [fn]="sortByOwner"
+              class="tw-hidden tw-w-2/6 lg:tw-table-cell"
+            >
+              {{ "owner" | i18n }}
+            </th>
+          }
+          <th bitCell class="tw-hidden tw-w-1/6 lg:tw-table-cell tw-text-right tw-font-medium">
+            {{ "options" | i18n }}
+          </th>
+        </tr>
+      </ng-container>
+      <ng-template body let-rows$>
+        <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 0">
+          @if (item.collection) {
+            <tr
+              bitRow
+              appVaultCollectionRow
+              alignContent="middle"
+              [disabled]="disabled()"
+              [collection]="item.collection"
+              [showOwner]="showOwner()"
+              [organizations]="allOrganizations()"
+            ></tr>
+          }
+          <!--
           addAccessStatus check here so ciphers do not show if user
           has filtered for collections with addAccess
         -->
-        @if (
-          item.cipher && (!addAccessToggle() || (addAccessToggle() && addAccessStatus() !== 1))
-        ) {
-          <tr
-            bitRow
-            appVaultCipherRow
-            alignContent="middle"
-            [disabled]="disabled()"
-            [cipher]="item.cipher"
-            [showOwner]="showOwner()"
-            [showPremiumFeatures]="showPremiumFeatures()"
-            [useEvents]="useEvents()"
-            [viewingOrgVault]="viewingOrgVault()"
-            [cloneable]="canClone$(item) | async"
-            [organizations]="allOrganizations()"
-            [canEditCipher]="canEditCipher(item.cipher)"
-            [canAssignCollections]="canAssignCollections(item.cipher)"
-            [canManageCollection]="canManageCollection(item.cipher)"
-            [canDeleteCipher]="
-              cipherAuthorizationService.canDeleteCipher$(item.cipher, showAdminActions()) | async
-            "
-            [canRestoreCipher]="
-              cipherAuthorizationService.canRestoreCipher$(item.cipher, showAdminActions()) | async
-            "
-            (onEvent)="event($event)"
-            [userCanArchive]="userCanArchive()"
-            [enforceOrgDataOwnershipPolicy]="enforceOrgDataOwnershipPolicy()"
-            [archiveEnabled]="archiveFeatureEnabled$ | async"
-          ></tr>
-        }
-      </ng-container>
-    </ng-template>
-  </bit-table>
+          @if (
+            item.cipher && (!addAccessToggle() || (addAccessToggle() && addAccessStatus() !== 1))
+          ) {
+            <tr
+              bitRow
+              appVaultCipherRow
+              alignContent="middle"
+              [disabled]="disabled()"
+              [cipher]="item.cipher"
+              [showOwner]="showOwner()"
+              [showPremiumFeatures]="showPremiumFeatures()"
+              [useEvents]="useEvents()"
+              [viewingOrgVault]="viewingOrgVault()"
+              [cloneable]="canClone$(item) | async"
+              [organizations]="allOrganizations()"
+              [canEditCipher]="canEditCipher(item.cipher)"
+              [canAssignCollections]="canAssignCollections(item.cipher)"
+              [canManageCollection]="canManageCollection(item.cipher)"
+              [canDeleteCipher]="
+                cipherAuthorizationService.canDeleteCipher$(item.cipher, showAdminActions()) | async
+              "
+              [canRestoreCipher]="
+                cipherAuthorizationService.canRestoreCipher$(item.cipher, showAdminActions())
+                  | async
+              "
+              (onEvent)="event($event)"
+              [userCanArchive]="userCanArchive()"
+              [enforceOrgDataOwnershipPolicy]="enforceOrgDataOwnershipPolicy()"
+              [archiveEnabled]="archiveFeatureEnabled$ | async"
+            ></tr>
+          }
+        </ng-container>
+      </ng-template>
+    </bit-table>
+  </div>
 </cdk-virtual-scroll-viewport>