From e02ab6688435680f6f616d1ffb5042e27051262f Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 28 Mar 2022 08:16:08 -0400
Subject: [PATCH] Add margins between labs sections (#8169)

---
 .../tabs/user/_LabsUserSettingsTab.scss       | 20 +++++++++----------
 .../tabs/user/LabsUserSettingsTab.tsx         | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss
index 023c75c186..6fa751a96f 100644
--- a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss
@@ -15,18 +15,18 @@ limitations under the License.
 */
 
 .mx_LabsUserSettingsTab {
-    .mx_SettingsTab_section {
-        margin-top: 32px;
+    .mx_SettingsTab_subsectionText, .mx_SettingsTab_section {
+        margin-bottom: 30px;
+    }
 
-        .mx_SettingsFlag {
-            margin-right: 0; // remove right margin to align with beta cards
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+    .mx_SettingsTab_section .mx_SettingsFlag {
+        margin-right: 0; // remove right margin to align with beta cards
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
-            .mx_ToggleSwitch {
-                float: unset;
-            }
+        .mx_ToggleSwitch {
+            float: unset;
         }
     }
 }
diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
index 0ae1a85c40..c632f2207d 100644
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
@@ -85,7 +85,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
             </div>;
         }
 
-        let labsSection;
+        let labsSections;
         if (SdkConfig.get("show_labs_settings")) {
             const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
             labs.forEach(f => {
@@ -143,14 +143,14 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                 );
             }
 
-            labsSection = <div className="mx_SettingsTab_section">
+            labsSections = <>
                 { sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
-                    <div key={group}>
+                    <div className="mx_SettingsTab_section" key={group}>
                         <span className="mx_SettingsTab_subheading">{ _t(labGroupNames[group]) }</span>
                         { flags }
                     </div>
                 )) }
-            </div>;
+            </>;
         }
 
         return (
@@ -172,7 +172,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                     }
                 </div>
                 { betaSection }
-                { labsSection }
+                { labsSections }
             </div>
         );
     }