From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 20 Aug 2023 21:08:18 +0000 (+0200)
Subject: Fixed the vertical alignment of buttons with icons
X-Git-Tag: 6.0.0_Beta_2~15
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=dbd859e1188d4db51b8f40b22e413109131caed3;p=GitHub%2FWoltLab%2FWCF.git

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 f1a718bf23..829090d724 100644
--- 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 955be18555..420b722877 100644
--- 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;