diff --git a/.changeset/popular-dogs-crash.md b/.changeset/popular-dogs-crash.md
new file mode 100644
index 0000000000..55085e0a06
--- /dev/null
+++ b/.changeset/popular-dogs-crash.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-rui": patch
+---
+
+fix([DST-1170]): Update Drawer styles to take full height on small screens when position top or bottom
diff --git a/themes/theme-rui/src/components/Drawer.styles.ts b/themes/theme-rui/src/components/Drawer.styles.ts
index 5a53c0e078..6214a246cf 100644
--- a/themes/theme-rui/src/components/Drawer.styles.ts
+++ b/themes/theme-rui/src/components/Drawer.styles.ts
@@ -3,23 +3,23 @@ import { ThemeComponent, cva } from '@marigold/system';
 export const Drawer: ThemeComponent<'Drawer'> = {
   overlay: cva([
     'group/overlay z-40',
-    'data-[placement=top]:w-full data-[placement=top]:entering:animate-slide-in-top data-[placement=top]:exiting:animate-slide-out-top data-[placement=top]:top-0 data-[placement=top]:left-0',
-    'data-[placement=bottom]:w-full data-[placement=bottom]:entering:animate-slide-in-bottom data-[placement=bottom]:exiting:animate-slide-out-bottom data-[placement=bottom]:bottom-0 data-[placement=bottom]:left-0',
-    'data-[placement=left]:entering:animate-slide-in-left data-[placement=left]:exiting:animate-slide-out-left data-[placement=left]:top-0 data-[placement=left]:left-0',
-    'data-[placement=right]:entering:animate-slide-in-right data-[placement=right]:exiting:animate-slide-out-right data-[placement=right]:top-0 data-[placement=right]:right-0',
+    'placement-top:w-full placement-top:entering:animate-slide-in-top placement-top:exiting:animate-slide-out-top placement-top:top-0 placement-top:left-0',
+    'placement-bottom:w-full placement-bottom:entering:animate-slide-in-bottom placement-bottom:exiting:animate-slide-out-bottom placement-bottom:bottom-0 placement-bottom:left-0',
+    'placement-left:entering:animate-slide-in-left placement-left:exiting:animate-slide-out-left placement-left:top-0 placement-left:left-0',
+    'placement-right:entering:animate-slide-in-right placement-right:exiting:animate-slide-out-right placement-right:top-0 placement-right:right-0',
   ]),
   container: cva(
     [
       'w-full relative grid-rows-[auto_1fr_auto]',
       'util-surface-overlay',
-      'data-[placement=top]:w-full data-[placement=bottom]:w-full',
+      'placement-top:w-full placement-bottom:w-full',
     ],
     {
       variants: {
         size: {
-          xsmall: 'w-64 data-[placement=top]:h-48 data-[placement=bottom]:h-48',
-          small: 'w-72 data-[placement=top]:h-64 data-[placement=bottom]:h-64',
-          medium: 'w-96 data-[placement=top]:h-80 data-[placement=bottom]:h-80',
+          xsmall: 'w-64 placement-top:sm:h-48 placement-bottom:sm:h-48',
+          small: 'w-72 placement-top:sm:h-64 placement-bottom:sm:h-64',
+          medium: 'w-96 placement-top:sm:h-80 placement-bottom:sm:h-80',
         },
       },
     }