Fix React hydration issues (#32958)

* Add more playwright axe tests to settings dialogs

* Add utility to jest setupTests to detect React hydration errors

* Iterate jest utility

* Fix axe issue heading-order

* Fix div-in-p issues

* Fix setupTests.ts

* Fix heading order

* Make types happier

* Fix hydration issues of thead containing text nodes

* Update tests

* Fix form-in-form React hydration issues

* Fix li-in-li React hydration issues

* Fix checked in form without onChange React hydration issue

* Fix styling bleeding from _common.pcss

* Update snapshots

* Fix more remaining issues

* Remove _common.pcss h2 rule altogether

* Fix test

* Update snapshots

* Iterate

* Iterate

* Update snapshots

* Simplify diff

* Test

* Update screenshots

* Update screenshot

apps/web/res/css/views/settings/_NotificationSettings2.pcss

@@ -12,12 +12,6 @@ Please see LICENSE files in the repository root for full details.
         gap: 32px;
         display: flex;
         flex-direction: column;
-
-        > form {
-            gap: 32px;
-            display: flex;
-            flex-direction: column;
-        }
     }
 
     .mx_SettingsSubsection_description {

apps/web/res/css/views/settings/tabs/_SettingsTab.pcss

@@ -14,12 +14,13 @@ Please see LICENSE files in the repository root for full details.
         color: $links;
     }
 
-    form:not(.mx_EncryptionUserSettingsTab form) {
+    form {
         display: flex;
         flex-direction: column;
-        gap: $spacing-8;
+        gap: var(--cpd-space-3x);
         flex-grow: 1;
     }
+
     // never want full width buttons
     // event when other content is 100% width
     .mx_AccessibleButton {