From f4a94f6e7f18c9fd5a2fd65bae56c60ee413299e Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Tue, 4 Jan 2022 10:57:29 +0100
Subject: [PATCH] Add new line in settings label (#7451)

---
 res/css/views/elements/_SettingsFlag.scss      | 3 ++-
 src/components/views/elements/SettingsFlag.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/res/css/views/elements/_SettingsFlag.scss b/res/css/views/elements/_SettingsFlag.scss
index 68e324fe81..533487d98c 100644
--- a/res/css/views/elements/_SettingsFlag.scss
+++ b/res/css/views/elements/_SettingsFlag.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_SettingsFlag {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 4px;
 
@@ -33,6 +33,7 @@ limitations under the License.
     font-size: $font-14px;
     color: $primary-content;
     padding-right: 10px;
+    padding-top: 4px;
 }
 
 .mx_SettingsFlag_microcopy {
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index c2d27f8ab7..a0af045c26 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -96,9 +96,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 <div className="mx_SettingsFlag">
                     <label className="mx_SettingsFlag_label">
                         <span className="mx_SettingsFlag_labelText">{ label }</span>
-                        { description && <span className="mx_SettingsFlag_microcopy">
+                        { description && <div className="mx_SettingsFlag_microcopy">
                             { description }
-                        </span> }
+                        </div> }
                     </label>
                     <ToggleSwitch
                         checked={this.state.value}