From bc12d7ae3dbcf3de7c162dedfb5b2dd1a1e70056 Mon Sep 17 00:00:00 2001
From: JaredScar <thewolfbadger@gmail.com>
Date: Fri, 23 Jan 2026 17:22:56 -0500
Subject: [PATCH] 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 | 5 +++--
 libs/components/src/dialog/dialog/dialog.component.ts   | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index f81f0594218..ae83e879190 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/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,
     }"
   >
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index f9073da2217..27763b8eca2 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/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 =