Fixed the vertical alignment of buttons with icons

See https://www.woltlab.com/community/thread/301239-aligning-the-button-icons-in-the-article-edit-page/

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index f1a718bf230b4dc45ac77223f4f170e6e0225d14..829090d724c66d4554acd7b253c0559d3b4689cc 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -92,7 +92,7 @@
                }
 
                .button {
-                       display: block;
+                       display: flex;
                        margin-left: 5px;
                        margin-bottom: 5px;
                        overflow: hidden;

diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 955be185552f2919c60aa9361abd1fe2bdbdca93..420b722877ee6c10d6fc3b9a413617004ce03b91 100644 (file)
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -21,12 +21,15 @@ input[type="submit"],
 .button,
 a.button {
        // a.button is required to override link formatting, such as drop-down buttons
+       align-items: center;
        background-color: var(--wcfButtonBackground);
        border-radius: var(--wcfBorderRadius);
        border-width: 0;
        color: var(--wcfButtonText);
+       // `0.25em` is the average width of a space that previously separated elements.
+       column-gap: 0.25em;
        cursor: pointer;
-       display: inline-block;
+       display: inline-flex;
        font-weight: 400;
        margin: 0;
        padding: 8px 18px;