Refine styles of menus, toasts, popovers, and modals (#12332)

* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot

res/css/views/dialogs/_LocationViewDialog.pcss

@@ -16,11 +16,6 @@ limitations under the License.
 
 .mx_LocationViewDialog_wrapper .mx_Dialog {
     padding: 0px;
-
-    /* Unset contain and position to allow the close button
-    to appear outside the dialog */
-    contain: unset;
-    position: unset;
 }
 
 .mx_LocationViewDialog {
@@ -37,16 +32,13 @@ limitations under the License.
         .mx_Dialog_title {
             display: none;
         }
+    }
 
-        .mx_Dialog_cancelButton {
-            z-index: 4010;
-            position: absolute;
-            right: 5vw;
-            top: 5vh;
-            width: 20px;
-            height: 20px;
-            background-color: $dialog-close-external-color;
-        }
+    .mx_Dialog_cancelButton {
+        z-index: 4010;
+        position: absolute;
+        left: var(--cpd-space-4x);
+        top: var(--cpd-space-4x);
     }
 }