Add new line in settings label (#7451)

matrix-org · Jan 4, 2022 · f4a94f6 · f4a94f6
1 parent b6c2b5c
commit f4a94f6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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}