[PM-25365] Enhance layout responsiveness in vault component header (#18679)

* Enhance layout responsiveness in vault components by adding flex properties to improve structure and ensure proper height management.

* Refactor vault component layout to rid of my changes

* Update apps/web/src/app/vault/individual-vault/vault.component.html

Co-authored-by: Jackson Engstrom <jengstrom@bitwarden.com>

---------

Co-authored-by: Jackson Engstrom <jengstrom@bitwarden.com>

apps/web/src/app/admin-console/organizations/collections/vault.component.html

@@ -30,7 +30,7 @@
     ></app-org-vault-header>
   }
 
-  <div class="tw-flex tw-flex-row">
+  <div class="tw-flex tw-flex-row tw-flex-1">
     @let hideVaultFilters = hideVaultFilter$ | async;
     @if (!hideVaultFilters) {
       <div class="tw-w-1/4 tw-mr-5">
@@ -43,7 +43,9 @@
       </div>
     }
 
-    <div [class]="hideVaultFilters ? 'tw-w-full' : 'tw-w-3/4'">
+    <div
+      [class]="(hideVaultFilters ? 'tw-w-full' : 'tw-w-3/4') + ' tw-flex tw-flex-col tw-min-h-0'"
+    >
       @if (showAddAccessToggle && activeFilter.selectedCollectionNode) {
         <bit-toggle-group
           [selected]="addAccessStatus$ | async"
@@ -68,6 +70,7 @@
 
       @if (filter) {
         <app-vault-items
+          class="tw-flex-1 tw-min-h-0"
           #vaultItems
           [ciphers]="ciphers$ | async"
           [collections]="collections$ | async"

apps/web/src/app/vault/individual-vault/vault.component.html

@@ -83,7 +83,7 @@
       <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </div>
     <div
-      class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
+      class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start tw-flex-1"
       *ngIf="isEmpty && !performingInitialLoad"
     >
       <bit-no-items [icon]="(emptyState$ | async)?.icon">