Update dialog component styles to enhance drawer behavior by changing height to full screen and adding sticky footer for improved layout and user experience.

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-full tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
+    isDrawer ? 'tw-h-screen tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
   ]"
   cdkTrapFocus
 >
@@ -84,13 +84,14 @@
     [ngClass]="{
       'tw-border-transparent': !showFooterBorder,
       'tw-border-secondary-100': showFooterBorder,
+      'tw-sticky tw-bottom-0 tw-z-10': isDrawer,
     }"
     data-chromatic="ignore"
   ></div>
   <footer
     class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
     [ngClass]="{
-      'tw-px-6 tw-py-4': isDrawer,
+      'tw-px-6 tw-py-4 tw-sticky tw-bottom-0 tw-z-10': isDrawer,
       'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
     }"
   >

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

@@ -131,7 +131,9 @@ export class DialogComponent implements AfterViewInit {
   protected readonly classes = computed(() => {
     // `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-h-full"] : ["md:tw-p-4", "tw-max-h-[90vh]"];
+    const sizeClasses = this.dialogRef?.isDrawer
+      ? ["tw-h-screen"]
+      : ["md:tw-p-4", "tw-max-h-[90vh]"];
 
     const size = this.dialogSize() ?? "default";
     const animationClasses =