Fix spacing regression in user settings - roles & permissions (#10993)

* add content container to settingsfieldset

* fix spacing

res/css/views/settings/_JoinRuleSettings.pcss

@@ -57,7 +57,6 @@ limitations under the License.
 
 .mx_JoinRuleSettings_radioButton {
     padding-top: 16px;
-    margin-bottom: 8px;
 
     .mx_StyledRadioButton_content {
         margin-left: 14px;

res/css/views/settings/_ProfileSettings.pcss

@@ -34,6 +34,8 @@ limitations under the License.
             }
 
             .mx_ProfileSettings_profile_controls_topic {
+                margin-top: $spacing-8;
+
                 & > textarea {
                     font-family: inherit;
                     resize: vertical;

res/css/views/settings/_SettingsFieldset.pcss

@@ -43,3 +43,9 @@ limitations under the License.
         }
     }
 }
+
+.mx_SettingsFieldset_content {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-8;
+}

src/components/views/settings/SettingsFieldset.tsx

@@ -31,7 +31,7 @@ const SettingsFieldset: React.FC<Props> = ({ legend, className, children, descri
                 <SettingsSubsectionText>{description}</SettingsSubsectionText>
             </div>
         )}
-        {children}
+        <div className="mx_SettingsFieldset_content">{children}</div>
     </fieldset>
 );
 

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -466,7 +466,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
                     label = _t("Send %(eventType)s events", { eventType });
                 }
                 return (
-                    <div className="" key={eventType}>
+                    <div key={eventType}>
                         <PowerSelector
                             label={label}
                             value={eventsLevels[eventType]}

test/components/views/settings/__snapshots__/SettingsFieldset-test.tsx.snap

@@ -20,9 +20,13 @@ exports[`<SettingsFieldset /> renders fieldset with plain text description 1`] =
         Changes to who can read history.
       </div>
     </div>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
       <div>
         test
       </div>
+    </div>
   </fieldset>
 </DocumentFragment>
 `;
@@ -54,9 +58,13 @@ exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
         </a>
       </div>
     </div>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
       <div>
         test
       </div>
+    </div>
   </fieldset>
 </DocumentFragment>
 `;
@@ -72,9 +80,13 @@ exports[`<SettingsFieldset /> renders fieldset without description 1`] = `
     >
       Who can read history?
     </legend>
+    <div
+      class="mx_SettingsFieldset_content"
+    >
       <div>
         test
       </div>
+    </div>
   </fieldset>
 </DocumentFragment>
 `;

test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap

@@ -9,6 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
   >
     Banned users
   </legend>
+  <div
+    class="mx_SettingsFieldset_content"
+  >
     <ul
       class="mx_RolesRoomSettingsTab_bannedList"
     >
@@ -24,5 +27,6 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
         </span>
       </li>
     </ul>
+  </div>
 </fieldset>
 `;

test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap

@@ -18,6 +18,9 @@ exports[`<SecurityRoomSettingsTab /> history visibility uses shared as default h
       Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.
     </div>
   </div>
+  <div
+    class="mx_SettingsFieldset_content"
+  >
     <label
       class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
     >
@@ -103,6 +106,7 @@ exports[`<SecurityRoomSettingsTab /> history visibility uses shared as default h
         class="mx_StyledRadioButton_spacer"
       />
     </label>
+  </div>
 </fieldset>
 `;
 

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -52,6 +52,9 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                 Decide who can view and join mock-space.
               </div>
             </div>
+            <div
+              class="mx_SettingsFieldset_content"
+            >
               <label
                 class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
               >
@@ -145,6 +148,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                   </b>
                 </p>
               </div>
+            </div>
           </fieldset>
         </div>
       </div>