[Cl-726] layout spacing updates (#15979)

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");

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 -->

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>