Fix class name of the read marker on MessagePanel (#10745)

* Optimize mx_RoomView_myReadMarker

- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"

* Conform the style rules to the naming policy

Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.

* Run prettier

* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`

- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots

* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`

The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.

- Create _MessagePanel.pcss for the style rules of MessagePanel

* Update permalinks.spec.ts

cypress/e2e/threads/threads.spec.ts

@@ -69,7 +69,7 @@ describe("Threads", () => {
         const MessageTimestampColor = "rgb(172, 172, 172)";
         const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
         // Exclude timestamp and read marker from snapshots
-        const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
+        const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }";
 
         cy.get(".mx_RoomView_body").within(() => {
             // User sends message
@@ -445,7 +445,7 @@ describe("Threads", () => {
 
         // Exclude timestamp, read marker, and mapboxgl-map from snapshots
         const percyCSS =
-            ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }";
+            ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }";
 
         cy.get(".mx_RoomView_body").within(() => {
             // User sends message