From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 25 Jul 2023 13:26:46 +0000 (+0200)
Subject: Force a minimum width on mobile dialogs
X-Git-Tag: 6.0.0_Alpha_8~60
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b8187475ee3adf2e83dc8a8212fa52831400d817;p=GitHub%2FWoltLab%2FWCF.git

Force a minimum width on mobile dialogs

See https://www.woltlab.com/community/thread/300784-mitglieder-filtern-dialog-fehlerhafte-mobile-darstellung/
See https://www.woltlab.com/community/thread/300751-preview-size-in-mobile-resolution-when-text-is-too-short/
---

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index fa90abe547..654a816961 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -8,7 +8,9 @@
 	position: fixed;
 	right: 0;
 	top: 0;
-	transition: opacity 0.12s linear, visibility 0s linear 0.24s;
+	transition:
+		opacity 0.12s linear,
+		visibility 0s linear 0.24s;
 	visibility: hidden;
 	will-change: opacity;
 	z-index: 399;
@@ -50,6 +52,7 @@
 
 	@include screen-xs {
 		margin: auto;
+		min-width: calc(80% - 20px);
 		max-width: calc(100% - 20px);
 		position: relative;
 	}
@@ -215,7 +218,9 @@
 	text-align: center;
 	top: 200px;
 	transform: translateX(-50%);
-	transition: visibility 0s linear 0.12s, opacity 0.12s linear;
+	transition:
+		visibility 0s linear 0.12s,
+		opacity 0.12s linear;
 	visibility: hidden;
 	z-index: 401;
 
@@ -235,7 +240,10 @@
 	position: fixed;
 	top: 0;
 	transform: translateY(-100%);
-	transition: visibility 0.12s linear 0.12s, transform 0.12s linear, opacity 0.12s linear;
+	transition:
+		visibility 0.12s linear 0.12s,
+		transform 0.12s linear,
+		opacity 0.12s linear;
 	visibility: hidden;
 	width: 100%;
 	z-index: 460;