[CL-944] update layout components to support constrained height contexts (#17670)

Author: willmartian

libs/components/src/dialog/dialog/dialog.component.html

@@ -3,7 +3,7 @@
   class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-border tw-border-solid tw-border-secondary-100 tw-bg-background tw-text-main"
   [ngClass]="[
     width,
-    isDrawer ? 'tw-h-screen tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
+    isDrawer ? 'tw-h-full tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
   ]"
   cdkTrapFocus
   cdkTrapFocusAutoCapture

libs/components/src/dialog/dialog/dialog.component.ts

@@ -104,7 +104,7 @@ export class DialogComponent {
     // `tw-max-h-[90vh]` is needed to prevent dialogs from overlapping the desktop header
     const baseClasses = ["tw-flex", "tw-flex-col", "tw-w-screen"];
     const sizeClasses = this.dialogRef?.isDrawer
-      ? ["tw-min-h-screen", "md:tw-w-[23rem]"]
+      ? ["tw-h-full", "md:tw-w-[23rem]"]
       : ["md:tw-p-4", "tw-w-screen", "tw-max-h-[90vh]"];
 
     const animationClasses =

libs/components/src/drawer/drawer-body.component.ts

@@ -12,7 +12,7 @@ import { hasScrolledFrom } from "../utils/has-scrolled-from";
   imports: [],
   host: {
     class:
-      "tw-p-4 tw-pt-0 tw-block tw-overflow-auto tw-border-solid tw-border tw-border-transparent tw-transition-colors tw-duration-200",
+      "tw-p-4 tw-pt-0 tw-flex-1 tw-overflow-auto tw-border-solid tw-border tw-border-transparent tw-transition-colors tw-duration-200",
     "[class.tw-border-t-secondary-300]": "this.hasScrolledFrom().top",
   },
   hostDirectives: [

libs/components/src/drawer/drawer.component.html

@@ -1,7 +1,7 @@
 <ng-container *cdkPortal>
   <section
     [attr.role]="role()"
-    class="tw-w-[23rem] tw-sticky tw-top-0 tw-h-screen tw-flex tw-flex-col tw-overflow-auto tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300 tw-bg-background"
+    class="tw-w-[23rem] tw-sticky tw-top-0 tw-h-full tw-flex tw-flex-col tw-overflow-auto tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300 tw-bg-background"
   >
     <ng-content></ng-content>
   </section>

libs/components/src/layout/layout.component.html

@@ -1,6 +1,6 @@
 @let mainContentId = "main-content";
-<div class="tw-flex tw-w-full">
-  <div class="tw-flex tw-w-full" cdkTrapFocus>
+<div class="tw-flex tw-size-full">
+  <div class="tw-flex tw-size-full" cdkTrapFocus>
     <div
       class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
     >
@@ -23,7 +23,7 @@
       [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-8 tw-pt-6 tw-@container"
+      class="tw-overflow-auto tw-max-h-full tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 tw-@container"
     >
       <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
       <ng-content></ng-content>
@@ -45,7 +45,7 @@
       </div>
     }
   </div>
-  <div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-screen md:tw-w-auto">
+  <div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-full md:tw-w-auto">
     <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
   </div>
 </div>

libs/components/src/layout/layout.component.ts

@@ -29,6 +29,7 @@ import { ScrollLayoutHostDirective } from "./scroll-layout.directive";
   ],
   host: {
     "(document:keydown.tab)": "handleKeydown($event)",
+    class: "tw-block tw-h-screen",
   },
   hostDirectives: [DrawerHostDirective],
 })

libs/components/src/navigation/side-nav.component.html

@@ -7,7 +7,7 @@
 ) {
   <nav
     id="bit-side-nav"
-    class="tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
+    class="tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-full tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
     [ngClass]="{ 'tw-w-60': data.open }"
     [ngStyle]="
       variant() === 'secondary' && {

libs/components/src/navigation/side-nav.component.ts

@@ -17,6 +17,9 @@ export type SideNavVariant = "primary" | "secondary";
   selector: "bit-side-nav",
   templateUrl: "side-nav.component.html",
   imports: [CommonModule, CdkTrapFocus, NavDividerComponent, BitIconButtonComponent, I18nPipe],
+  host: {
+    class: "tw-block tw-h-full",
+  },
 })
 export class SideNavComponent {
   readonly variant = input<SideNavVariant>("primary");