Clarify style rule structure of ProfileSettings to avoid unexpected regressions (#8884)

res/css/views/settings/_ProfileSettings.scss

@@ -14,49 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ProfileSettings_controls_topic {
-    & > textarea {
-        font-family: inherit;
-        resize: vertical;
+.mx_ProfileSettings {
+    @mixin mx_Settings_fullWidthField;
+    border-bottom: 1px solid $quinary-content;
+
+    .mx_ProfileSettings_avatarUpload {
+        display: none;
     }
-}
 
-.mx_ProfileSettings_profile {
-    display: flex;
-}
+    .mx_ProfileSettings_profile {
+        display: flex;
 
-.mx_ProfileSettings_controls {
-    flex-grow: 1;
-    margin-right: 54px;
-}
+        .mx_ProfileSettings_profile_controls {
+            flex-grow: 1;
+            margin-inline-end: 54px;
 
-.mx_ProfileSettings_controls .mx_Field #profileTopic {
-    height: 4em;
-}
+            .mx_Field:first-child {
+                margin-top: 0;
+            }
 
-.mx_ProfileSettings_controls .mx_Field:first-child {
-    margin-top: 0;
-}
+            .mx_ProfileSettings_profile_controls_topic {
+                & > textarea {
+                    font-family: inherit;
+                    resize: vertical;
+                }
 
-.mx_ProfileSettings_userId {
-    margin-right: $spacing-20;
-}
-
-.mx_ProfileSettings_avatarUpload {
-    display: none;
-}
+                &.mx_ProfileSettings_profile_controls_topic--room {
+                    height: 4em;
+                }
+            }
 
-.mx_ProfileSettings_profileForm {
-    @mixin mx_Settings_fullWidthField;
-    border-bottom: 1px solid $quinary-content;
-}
+            .mx_ProfileSettings_profile_controls_userId {
+                margin-inline-end: $spacing-20;
+            }
+        }
+    }
 
-.mx_ProfileSettings_buttons {
-    margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
-    margin-bottom: 28px;
+    .mx_ProfileSettings_buttons {
+        margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
+        margin-bottom: $spacing-28;
 
-    > .mx_AccessibleButton_kind_link {
-        font-size: $font-14px;
-        margin-right: 10px;
+        > .mx_AccessibleButton_kind_link {
+            font-size: $font-14px;
+            margin-inline-end: 10px; // TODO: Use a spacing variable
+        }
     }
 }

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { createRef } from 'react';
+import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -249,7 +250,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                 onSubmit={this.saveProfile}
                 autoComplete="off"
                 noValidate={true}
-                className="mx_ProfileSettings_profileForm"
+                className="mx_ProfileSettings"
             >
                 <input
                     type="file"
@@ -260,7 +261,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                     accept="image/*"
                 />
                 <div className="mx_ProfileSettings_profile">
-                    <div className="mx_ProfileSettings_controls">
+                    <div className="mx_ProfileSettings_profile_controls">
                         <Field
                             label={_t("Room Name")}
                             type="text"
@@ -270,8 +271,11 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                             disabled={!this.state.canSetName}
                         />
                         <Field
-                            className="mx_ProfileSettings_controls_topic"
-                            id="profileTopic"
+                            className={classNames(
+                                "mx_ProfileSettings_profile_controls_topic",
+                                "mx_ProfileSettings_profile_controls_topic--room",
+                            )}
+                            id="profileTopic" // See: NewRoomIntro.tsx
                             label={_t("Room Topic")}
                             disabled={!this.state.canSetTopic}
                             type="text"

src/components/views/settings/ProfileSettings.tsx

@@ -183,7 +183,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                 onSubmit={this.saveProfile}
                 autoComplete="off"
                 noValidate={true}
-                className="mx_ProfileSettings_profileForm"
+                className="mx_ProfileSettings"
             >
                 <input
                     type="file"
@@ -194,7 +194,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                     accept="image/*"
                 />
                 <div className="mx_ProfileSettings_profile">
-                    <div className="mx_ProfileSettings_controls">
+                    <div className="mx_ProfileSettings_profile_controls">
                         <span className="mx_SettingsTab_subheading">{ _t("Profile") }</span>
                         <Field
                             label={_t("Display Name")}
@@ -204,7 +204,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                             onChange={this.onDisplayNameChanged}
                         />
                         <p>
-                            { userIdentifier && <span className="mx_ProfileSettings_userId">
+                            { userIdentifier && <span className="mx_ProfileSettings_profile_controls_userId">
                                 { userIdentifier }
                             </span> }
                             { hostingSignup }