From 271f0090e3e133541c608ea9225a3515f2a5638f Mon Sep 17 00:00:00 2001 From: Rohan Chakraborty Date: Fri, 15 May 2026 01:21:57 +0530 Subject: [PATCH] fix(dialog): anchor 160px from top, center on small viewports Replaces the always-centered positioning of Dialog and AlertDialog with a 160px top offset on tall viewports, falling back to vertical centering when the viewport is too short to fit the offset. The whole vertical position is expressed as `translateY(min(160px, calc(50vh - 50%)))` so the transition between the two modes happens smoothly on resize without media queries. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../raystack/components/dialog/dialog.module.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 {