diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index b97cefdaf..bdc8a24a4 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -21,14 +21,19 @@
   max-height: 85vh;
   padding: 0;
   position: fixed;
-  top: 50%;
+  top: 0;
   left: 50%;
   transition: opacity 150ms;
-  transform: translate(-50%, -50%);
+  /* translateY is the smaller of 160px (desired top offset) and
+     calc(50vh - 50%) (the y-coord that vertically centers the dialog,
+     where the inner 50% resolves to the element's own height). On tall
+     viewports the 160px branch wins; on short ones the centered branch
+     wins, so the dialog stays inside the viewport on resize. */
+  transform: translate(-50%, min(160px, calc(50vh - 50%)));
 }
 
 .dialogContent.showNestedAnimation {
-  transform: translate(-50%, -50%)
+  transform: translate(-50%, min(160px, calc(50vh - 50%)))
     scale(calc(1 - 0.1 * var(--nested-dialogs, 0)));
   translate: 0 calc(0px + 1.25rem * var(--nested-dialogs, 0));
 }
@@ -47,7 +52,7 @@
 .dialogContent.showNestedAnimation[data-starting-style],
 .dialogContent.showNestedAnimation[data-ending-style] {
   opacity: 0;
-  transform: translate(-50%, -50%) scale(0.9);
+  transform: translate(-50%, min(160px, calc(50vh - 50%))) scale(0.9);
 }
 
 .close {