From b909622e62bd1b54d8285a03974a595fee8898b0 Mon Sep 17 00:00:00 2001
From: Francis Tse <francis.tse@hypergiant.com>
Date: Tue, 19 May 2026 16:10:12 -0700
Subject: [PATCH 1/3] fix: issue with the drawer rendering where the layout is
 shifted from the animation

---
 .../src/components/drawer/styles.module.css               | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/design-toolkit/src/components/drawer/styles.module.css b/packages/design-toolkit/src/components/drawer/styles.module.css
index 6d8be2f7b..ae2c42cce 100644
--- a/packages/design-toolkit/src/components/drawer/styles.module.css
+++ b/packages/design-toolkit/src/components/drawer/styles.module.css
@@ -29,7 +29,7 @@
     --drawer-main-rows: var(--drawer-main-row-start) /
       var(--drawer-main-row-end);
 
-    @apply relative grid h-full w-full;
+    @apply relative grid h-full w-full overflow-hidden;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr auto;
 
@@ -233,12 +233,14 @@
     @apply gap-s p-l flex h-full min-h-0 flex-col;
     opacity: 0;
     pointer-events: none;
+    visibility: hidden;
 
     @variant motion-safe {
       transition:
         transform var(--animation-duration-fast)
           var(--animation-easing-standard),
-        opacity var(--animation-duration-fast) var(--animation-easing-standard);
+        opacity var(--animation-duration-fast) var(--animation-easing-standard),
+        visibility 0s var(--animation-duration-fast);
     }
 
     @variant group-placement-left/drawer {
@@ -260,7 +262,9 @@
     @variant group-open/drawer {
       opacity: 1;
       pointer-events: auto;
+      visibility: visible;
       transform: translate(0, 0);
+      transition-delay: 0s;
     }
 
     @variant group-placement-left/drawer {

From 27295c858e79ff394248f182fdae8d41a162b415 Mon Sep 17 00:00:00 2001
From: Francis Tse <francis.tse@hypergiant.com>
Date: Tue, 19 May 2026 16:31:09 -0700
Subject: [PATCH 2/3] docs: changeset

---
 .changeset/fuzzy-boxes-draw.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fuzzy-boxes-draw.md

diff --git a/.changeset/fuzzy-boxes-draw.md b/.changeset/fuzzy-boxes-draw.md
new file mode 100644
index 000000000..fc04e1380
--- /dev/null
+++ b/.changeset/fuzzy-boxes-draw.md
@@ -0,0 +1,5 @@
+---
+"@accelint/design-toolkit": minor
+---
+
+Fixed layout issue with drawer

From 13777c643f2f06874ecd660282f5cfd9a9feb27f Mon Sep 17 00:00:00 2001
From: Francis Tse <francis.tse@hypergiant.com>
Date: Wed, 20 May 2026 14:58:49 -0700
Subject: [PATCH 3/3] feat: make it so that the drawers extend out to fill the
 space of collapsed drawers

---
 .../src/components/drawer/styles.module.css   | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/design-toolkit/src/components/drawer/styles.module.css b/packages/design-toolkit/src/components/drawer/styles.module.css
index ae2c42cce..068008796 100644
--- a/packages/design-toolkit/src/components/drawer/styles.module.css
+++ b/packages/design-toolkit/src/components/drawer/styles.module.css
@@ -75,11 +75,15 @@
       }
 
       @variant group-extend-right/layout {
-        @apply col-end-3;
+        @variant group-has-[[data-placement=right][data-open]]/layout {
+          @apply col-end-3;
+        }
       }
 
       @variant group-extend-left/layout {
-        @apply col-start-2;
+        @variant group-has-[[data-placement=left][data-open]]/layout {
+          @apply col-start-2;
+        }
       }
 
       @variant group-data-[extend=bottom]/layout {
@@ -96,11 +100,15 @@
       }
 
       @variant group-extend-top/layout {
-        @apply row-start-2;
+        @variant group-has-[[data-placement=top][data-open]]/layout {
+          @apply row-start-2;
+        }
       }
 
       @variant group-extend-bottom/layout {
-        @apply row-end-3;
+        @variant group-has-[[data-placement=bottom][data-open]]/layout {
+          @apply row-end-3;
+        }
       }
 
       @variant group-data-[extend=left]/layout {
@@ -117,11 +125,15 @@
       }
 
       @variant group-extend-right/layout {
-        @apply col-end-3;
+        @variant group-has-[[data-placement=right][data-open]]/layout {
+          @apply col-end-3;
+        }
       }
 
       @variant group-extend-left/layout {
-        @apply col-start-2;
+        @variant group-has-[[data-placement=left][data-open]]/layout {
+          @apply col-start-2;
+        }
       }
 
       @variant group-data-[extend=top]/layout {
@@ -138,11 +150,15 @@
       }
 
       @variant group-extend-top/layout {
-        @apply row-start-2;
+        @variant group-has-[[data-placement=top][data-open]]/layout {
+          @apply row-start-2;
+        }
       }
 
       @variant group-extend-bottom/layout {
-        @apply row-end-3;
+        @variant group-has-[[data-placement=bottom][data-open]]/layout {
+          @apply row-end-3;
+        }
       }
 
       @variant group-data-[extend=right]/layout {