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/views/audio_messages/_PlayPauseButton.pcss

@@ -14,11 +14,11 @@ Please see LICENSE files in the repository root for full details.
     min-height: 32px; /* for when the button is used in a flexbox */
     border-radius: 32px;
     background-color: $system;
-    padding: var(--cpd-space-1-5x);
+    /* !important override compound icon button */
+    padding: var(--cpd-space-1-5x) !important;
     box-sizing: border-box;
 
     svg {
-        color: $secondary-content;
         width: 20px;
         height: 20px;
     }

res/css/views/avatars/_WidgetAvatar.pcss

@@ -7,5 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_WidgetAvatar {
-    border-radius: 4px;
+    /* !important override compound avatar */
+    border-radius: 4px !important;
 }

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -13,11 +13,12 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_Dialog {
-        width: fit-content;
-        border-radius: 8px;
+        /* !important because it's overriding compound  */
+        width: fit-content !important;
+        border-radius: 8px !important;
+        height: 60% !important;
         overflow-y: initial;
         position: relative;
-        height: 60%;
         padding: 0;
         contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
 

res/css/views/dialogs/_VerifyEMailDialog.pcss

@@ -15,7 +15,8 @@ Please see LICENSE files in the repository root for full details.
         font: var(--cpd-font-body-md-regular);
         padding: $spacing-24 $spacing-24 $spacing-16;
         text-align: center;
-        width: 485px;
+        /* !important override compound  */
+        width: 485px !important;
 
         h1 {
             font-size: $font-24px;

res/css/views/rooms/_ReadReceiptGroup.pcss

@@ -44,8 +44,8 @@ Please see LICENSE files in the repository root for full details.
             /* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
             box-sizing: content-box;
             border: 1px solid $background !important;
-            /* Reset the line height as we are no longer box-sizing border-box */
-            line-height: var(--cpd-avatar-size);
+            /* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */
+            line-height: 14px;
             position: absolute;
             will-change: left, top;
             transition:

res/css/views/settings/encryption/_AdvancedPanel.pcss

@@ -9,7 +9,8 @@
 .mx_OtherSettings {
     display: flex;
     flex-direction: column;
-    gap: var(--cpd-space-6x);
+    /* !important override compound form */
+    gap: var(--cpd-space-6x) !important;
     width: 100%;
     align-items: start;
 

res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss

@@ -14,7 +14,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MediaPreviewAccountSetting_RadioHelp {
-    margin-top: 0;
+    /* !important because it's overriding compound help message */
+    margin-top: 0 !important;
     margin-bottom: var(--cpd-space-1x);
 }