From cf929edb9c419fb41abe0acaa538b7471da7226b Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Fri, 19 Sep 2025 11:32:30 -0400
Subject: [PATCH] [Cl-726] layout spacing updates (#15979)

---
 .../collections/deprecated_vault.component.html          | 2 --
 .../organizations/collections/vault.component.html       | 9 +--------
 .../layouts/organization-layout.component.html           | 6 +-----
 .../organization-payment-method.component.html           | 1 -
 .../organization-free-trial-warning.component.ts         | 1 -
 .../organization-reseller-renewal-warning.component.ts   | 1 -
 .../src/app/billing/shared/payment-method.component.html | 1 -
 .../warnings/components/tax-id-warning.component.ts      | 7 +------
 .../web/src/app/layouts/header/web-header.component.html | 2 +-
 .../vault-banners/vault-banners.component.html           | 6 ------
 .../app/secrets-manager/overview/overview.component.html | 1 -
 libs/components/src/banner/banner.component.ts           | 5 +++++
 libs/components/src/layout/layout.component.html         | 3 ++-
 .../components/kitchen-sink-main.component.ts            | 4 +---
 14 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html b/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html
index 1122f10e8f..63dcbecf91 100644
--- a/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.html
@@ -12,7 +12,6 @@
 <ng-container *ngIf="freeTrialWhenWarningsServiceDisabled$ | async as freeTrial">
   <bit-banner
     id="free-trial-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
     icon="bwi-billing"
     bannerType="premium"
     [showClose]="false"
@@ -33,7 +32,6 @@
 <ng-container *ngIf="resellerWarningWhenWarningsServiceDisabled$ | async as resellerWarning">
   <bit-banner
     id="reseller-warning-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
     icon="bwi-billing"
     bannerType="info"
     [showClose]="false"
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 44a01308bc..f2a4e4f458 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
@@ -20,13 +20,7 @@
 
   @let freeTrial = freeTrialWhenWarningsServiceDisabled$ | async;
   @if (!refreshing && freeTrial?.shownBanner) {
-    <bit-banner
-      id="free-trial-banner"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-      icon="bwi-billing"
-      bannerType="premium"
-      [showClose]="false"
-    >
+    <bit-banner id="free-trial-banner" icon="bwi-billing" bannerType="premium" [showClose]="false">
       {{ freeTrial.message }}
       <a
         bitLink
@@ -44,7 +38,6 @@
   @if (!refreshing && resellerWarning) {
     <bit-banner
       id="reseller-warning-banner"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
       icon="bwi-billing"
       bannerType="info"
       [showClose]="false"
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
index b937cc5526..10290d52f1 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
@@ -140,11 +140,7 @@
   </app-side-nav>
 
   <ng-container *ngIf="organization$ | async as organization">
-    <bit-banner
-      *ngIf="organization.isProviderUser"
-      [showClose]="false"
-      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-    >
+    <bit-banner *ngIf="organization.isProviderUser" [showClose]="false">
       {{ "accessingUsingProvider" | i18n: organization.providerName }}
     </bit-banner>
     <app-tax-id-warning
diff --git a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
index a0d0dd6c78..cf3fe8a933 100644
--- a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
+++ b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
@@ -1,6 +1,5 @@
 <bit-banner
   id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"
   icon="bwi-billing"
   [showClose]="false"
diff --git a/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts b/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts
index 4925e4bc01..1a889ec9b6 100644
--- a/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts
+++ b/apps/web/src/app/billing/organizations/warnings/components/organization-free-trial-warning.component.ts
@@ -16,7 +16,6 @@ import { OrganizationFreeTrialWarning } from "../types";
     @if (warning) {
       <bit-banner
         id="free-trial-banner"
-        class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
         icon="bwi-billing"
         bannerType="premium"
         [showClose]="false"
diff --git a/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts b/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts
index 4eba9f3daf..c49f59f6b0 100644
--- a/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts
+++ b/apps/web/src/app/billing/organizations/warnings/components/organization-reseller-renewal-warning.component.ts
@@ -16,7 +16,6 @@ import { OrganizationResellerRenewalWarning } from "../types";
     @if (warning) {
       <bit-banner
         id="reseller-warning-banner"
-        class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
         icon="bwi-billing"
         bannerType="info"
         [showClose]="false"
diff --git a/apps/web/src/app/billing/shared/payment-method.component.html b/apps/web/src/app/billing/shared/payment-method.component.html
index 16e1939907..6d3b1adff9 100644
--- a/apps/web/src/app/billing/shared/payment-method.component.html
+++ b/apps/web/src/app/billing/shared/payment-method.component.html
@@ -1,6 +1,5 @@
 <bit-banner
   id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"
   icon="bwi-billing"
   [showClose]="false"
diff --git a/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts b/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts
index 7527ef8f0b..55fa0c0f43 100644
--- a/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts
+++ b/apps/web/src/app/billing/warnings/components/tax-id-warning.component.ts
@@ -90,12 +90,7 @@ type GetWarning$ = () => Observable<TaxIdWarningType | null>;
       @let view = view$ | async;
 
       @if (view) {
-        <bit-banner
-          id="tax-id-warning-banner"
-          class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
-          bannerType="warning"
-          (onClose)="trackDismissal()"
-        >
+        <bit-banner id="tax-id-warning-banner" bannerType="warning" (onClose)="trackDismissal()">
           {{ view.message }}
           <a
             bitLink
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 91c3185364..4b833e771d 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -1,6 +1,6 @@
 <header
   *ngIf="routeData$ | async as routeData"
-  class="-tw-m-6 tw-mb-3 tw-flex tw-flex-col tw-p-6"
+  class="-tw-mt-6 -tw-mx-8 tw-mb-3 tw-flex tw-flex-col tw-py-6 tw-px-8"
   [ngClass]="{
     'tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-bg-background-alt tw-pb-0':
       tabsContainer.childElementCount !== 0,
diff --git a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
index e97f1579f5..14be34c2a1 100644
--- a/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html
@@ -1,6 +1,5 @@
 <bit-banner
   id="free-trial-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"
   icon="bwi-billing"
   [showClose]="false"
@@ -20,7 +19,6 @@
 
 <bit-banner
   id="update-browser-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="warning"
   *ngIf="visibleBanners.includes(VisibleVaultBanner.OutdatedBrowser)"
   (onClose)="dismissBanner(VisibleVaultBanner.OutdatedBrowser)"
@@ -39,7 +37,6 @@
 
 <bit-banner
   id="kdf-settings-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="warning"
   *ngIf="visibleBanners.includes(VisibleVaultBanner.KDFSettings)"
   (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
@@ -52,7 +49,6 @@
 
 <bit-banner
   id="pending-auth-request-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="info"
   icon="bwi-info-circle"
   *ngIf="visibleBanners.includes(VisibleVaultBanner.PendingAuthRequest)"
@@ -67,14 +63,12 @@
 <app-verify-email
   id="verify-email-banner"
   *ngIf="visibleBanners.includes(VisibleVaultBanner.VerifyEmail)"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   (onDismiss)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
   (onVerified)="dismissBanner(VisibleVaultBanner.VerifyEmail)"
 ></app-verify-email>
 
 <bit-banner
   id="premium-banner"
-  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
   bannerType="premium"
   *ngIf="premiumBannerVisible$ | async"
   (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
index 04fb00cb65..cd514f3933 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
@@ -1,7 +1,6 @@
 <ng-container *ngIf="freeTrial$ | async as freeTrial">
   <bit-banner
     id="update-browser-banner"
-    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
     bannerType="premium"
     icon="bwi-billing"
     [showClose]="false"
diff --git a/libs/components/src/banner/banner.component.ts b/libs/components/src/banner/banner.component.ts
index a9c837fb04..632bccae95 100644
--- a/libs/components/src/banner/banner.component.ts
+++ b/libs/components/src/banner/banner.component.ts
@@ -27,6 +27,11 @@ const defaultIcon: Record<BannerType, string> = {
   selector: "bit-banner",
   templateUrl: "./banner.component.html",
   imports: [CommonModule, IconButtonModule, I18nPipe],
+  host: {
+    // Account for bit-layout's padding
+    class:
+      "tw-flex tw-flex-col [bit-layout_&]:-tw-mx-8 [bit-layout_&]:-tw-my-6 [bit-layout_&]:tw-pb-6",
+  },
 })
 export class BannerComponent implements OnInit {
   readonly bannerType = input<BannerType>("info");
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index f31d2901b0..a4ee3f0d8a 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -23,8 +23,9 @@
       [id]="mainContentId"
       tabindex="-1"
       bitScrollLayoutHost
-      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ms-0 tw-ms-16"
+      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 md:tw-ms-0 tw-ms-16"
     >
+      <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
       <ng-content></ng-content>
 
       <!-- overlay backdrop for side-nav -->
diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
index f8b5421f37..a96964db8d 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts
@@ -89,9 +89,7 @@ class KitchenSinkDialog {
   selector: "bit-tab-main",
   imports: [KitchenSinkSharedModule, KitchenSinkTable, KitchenSinkToggleList, KitchenSinkForm],
   template: `
-    <bit-banner bannerType="info" class="-tw-m-6 tw-flex tw-flex-col tw-pb-6">
-      Kitchen Sink test zone
-    </bit-banner>
+    <bit-banner bannerType="info"> Kitchen Sink test zone </bit-banner>
 
     <p class="tw-mt-4">
       <bit-breadcrumbs>