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 fa90abe547c33c690c48d9f1792a820eca32671f..654a8169618163f64522764c78580810bdd7f854 100644 (file)
--- 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;