From 8fb8e05c07732280ff5fea3b926b71f35db9b0ff Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 1 Jan 2022 16:20:41 +0100
Subject: [PATCH] Prevent blurry dialogs by using CSS grids for positioning

Fixes #4593
---
 wcfsetup/install/files/style/ui/dialog.scss | 22 +++++++--------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 7e2f6b32f4..a9b502f001 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -1,5 +1,5 @@
 .dialogOverlay {
-	background-color: transparent;
+	background-color: rgba(0, 0, 0, 0.4);
 	bottom: 0;
 	left: 0;
 	opacity: 0;
@@ -11,26 +11,15 @@
 	will-change: opacity;
 	z-index: 399;
 
-	@include screen-sm-up {
-		padding: 100px 0;
-	}
-
 	&[aria-hidden="false"] {
 		opacity: 1;
 		transition-delay: 0s;
 		visibility: visible;
 	}
 
-	&::before {
-		background-color: rgba(0, 0, 0, 0.4);
-		bottom: 0;
-		content: "";
-		display: block;
-		left: 0;
-		position: fixed;
-		right: 0;
-		top: 0;
-		z-index: 100;
+	@include screen-sm-up {
+		display: grid;
+		grid-template-areas: "dialog";
 	}
 }
 
@@ -67,9 +56,12 @@
 	}
 
 	@include screen-sm-up {
+		align-self: flex-start;
 		animation: wcfDialogOut 0.3s;
 		animation-fill-mode: forwards;
 		box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
+		grid-area: dialog;
+		justify-self: center;
 		left: 50%;
 		max-height: 80%;
 		max-width: 80%;
-- 
2.20.1