Fix styling issue when using EW modules (#31533)

* style: move compound loading order

* fix: spotlight fiting

* fix: don't use internal compound css var in settings subsection

* fix: don't use internaal compound css var in read receipt group

* fix: add important to font settings on body element

* fix: remove play pause button color and fix padding

This color wasn't apply because this PR. Removing to avoid visual
regression

* fix: add important to form help message override in preference settings

* fix: override compound in space panel buttons

* fix: layout of forgot password

* fix: height of encryption tab

* fix: widget avatar border radius

res/css/components/views/settings/shared/_SettingsSubsection.pcss

@@ -20,9 +20,10 @@ Please see LICENSE files in the repository root for full details.
         /**
          * The gap between subsections is 32px and inside the subsection is 24px.
          * The separator separates the subsections, so it should have the same gap as the subsections.
-         * We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
+         * We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections.
+         * !important because it's overriding compound margin.
          */
-        margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
+        margin-top: var(--cpd-space-5x) !important;
     }
 }