From f010d28492975acf33d8d69aa8658123dd22459e Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 15:02:49 -0500
Subject: [PATCH] [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>
---
 .../organizations/collections/vault.component.html         | 7 +++++--
 .../src/app/vault/individual-vault/vault.component.html    | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.html b/apps/web/src/app/admin-console/organizations/collections/vault.component.html
index 5d05e703fd4..17d5fdea064 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.html
+++ b/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"
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html
index cb5332d07d8..f54bfb1dda2 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/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">