Improve SetIntegrationManager (#8878)

res/css/views/elements/_ToggleSwitch.scss

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_ToggleSwitch {
+    --ToggleSwitch-min-width: $font-44px;
+
     transition: background-color 0.20s ease-out 0.1s;
 
     width: $font-44px;

res/css/views/settings/_SetIntegrationManager.scss

@@ -15,22 +15,26 @@ limitations under the License.
 */
 
 .mx_SetIntegrationManager {
-    margin-top: 10px;
+    .mx_SettingsFlag {
-    margin-bottom: 10px;
+        align-items: center;
-}
+        margin-top: var(--SettingsTab_heading_nth_child-margin-top);
 
-.mx_SetIntegrationManager > .mx_SettingsTab_heading {
+        .mx_SetIntegrationManager_heading_manager {
-    margin-bottom: 10px;
+            display: flex;
-}
+            align-items: center;
+            flex-wrap: wrap;
+            column-gap: $spacing-4;
 
-.mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading {
+            .mx_SettingsTab_heading,
-    display: inline-block;
+            .mx_SettingsTab_subheading {
-    padding-left: 5px;
+                margin-top: 0;
-    margin-top: 0px;
+                margin-bottom: 0;
-}
+            }
+        }
 
-.mx_SetIntegrationManager .mx_ToggleSwitch {
+        .mx_ToggleSwitch {
-    display: inline-block;
+            align-self: flex-start;
-    float: right;
+            min-width: var(--ToggleSwitch-min-width); // avoid compression
-    top: 9px;
+        }
+    }
 }

res/css/views/settings/tabs/_SettingsTab.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_SettingsTab {
     --SettingsTab_section-margin-bottom-preferences-labs: 30px;
+    --SettingsTab_heading_nth_child-margin-top: 30px; // TODO: Use a spacing variable
     --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; // So it fits in the space provided by the page
 
@@ -38,7 +39,7 @@ limitations under the License.
     margin-bottom: 10px; // TODO: Use a spacing variable
 
     &:nth-child(n + 2) {
-        margin-top: 30px; // TODO: Use a spacing variable
+        margin-top: var(--SettingsTab_heading_nth_child-margin-top);
     }
 }
 

src/components/views/settings/SetIdServer.tsx

@@ -407,7 +407,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         }
 
         return (
-            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this.checkIdServer}>
+            <form className="mx_SetIdServer" onSubmit={this.checkIdServer}>
                 <span className="mx_SettingsTab_subheading">
                     { sectionTitle }
                 </span>

src/components/views/settings/SetIntegrationManager.tsx

@@ -74,24 +74,26 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
 
         return (
             <div className='mx_SetIntegrationManager'>
-                <div className="mx_SettingsTab_heading">
+                <div className="mx_SettingsFlag">
-                    <span>{ _t("Manage integrations") }</span>
+                    <div className="mx_SetIntegrationManager_heading_manager">
-                    <span className="mx_SettingsTab_subheading">{ managerName }</span>
+                        <span className="mx_SettingsTab_heading">{ _t("Manage integrations") }</span>
+                        <span className="mx_SettingsTab_subheading">{ managerName }</span>
+                    </div>
                     <ToggleSwitch
                         checked={this.state.provisioningEnabled}
                         disabled={false}
                         onChange={this.onProvisioningToggled}
                     />
                 </div>
-                <span className="mx_SettingsTab_subsectionText">
+                <div className="mx_SettingsTab_subsectionText">
                     { bodyText }
-                    <br />
+                </div>
-                    <br />
+                <div className="mx_SettingsTab_subsectionText">
                     { _t(
                         "Integration managers receive configuration data, and can modify widgets, " +
                         "send room invites, and set power levels on your behalf.",
                     ) }
-                </span>
+                </div>
             </div>
         );
     }