From 166fe3f0e94880acfb64b461f858a6298c7b31fb Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 28 Dec 2021 14:25:30 +0100
Subject: [PATCH 1/3] add br in settings label

---
 src/components/views/elements/SettingsFlag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index c2d27f8ab72..6431882772d 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -97,7 +97,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                     <label className="mx_SettingsFlag_label">
                         <span className="mx_SettingsFlag_labelText">{ label }</span>
                         { description && <span className="mx_SettingsFlag_microcopy">
-                            { description }
+                            <br /> { description }
                         </span> }
                     </label>
                     <ToggleSwitch

From a03bb80a1a2663d5c88c7ae84ce766befe9255d0 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 28 Dec 2021 19:03:24 +0100
Subject: [PATCH 2/3] fix toggle alignment

---
 res/css/views/elements/_SettingsFlag.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/elements/_SettingsFlag.scss b/res/css/views/elements/_SettingsFlag.scss
index 68e324fe812..54bc9df231e 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: 3.5px;
 }
 
 .mx_SettingsFlag_microcopy {

From 7d09f76bbf24daab27715ed824ce0c0d5c8b69b8 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Mon, 3 Jan 2022 19:45:03 +0100
Subject: [PATCH 3/3] review fixes

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

diff --git a/res/css/views/elements/_SettingsFlag.scss b/res/css/views/elements/_SettingsFlag.scss
index 54bc9df231e..533487d98cf 100644
--- a/res/css/views/elements/_SettingsFlag.scss
+++ b/res/css/views/elements/_SettingsFlag.scss
@@ -33,7 +33,7 @@ limitations under the License.
     font-size: $font-14px;
     color: $primary-content;
     padding-right: 10px;
-    padding-top: 3.5px;
+    padding-top: 4px;
 }
 
 .mx_SettingsFlag_microcopy {
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 6431882772d..a0af045c269 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">
-                            <br /> { description }
-                        </span> }
+                        { description && <div className="mx_SettingsFlag_microcopy">
+                            { description }
+                        </div> }
                     </label>
                     <ToggleSwitch
                         checked={this.state.value}