Hopefully working CSS that doesn't cause the messages to jump about when a read marker disappears.

config.json

@@ -1,4 +1,4 @@
 {
-    "default_hs_url": "https://matrix.org",
+    "default_hs_url": "http://localhost:8008",
     "default_is_url": "https://vector.im"
 }

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -168,15 +168,13 @@ li.mx_RoomView_myReadMarker_container {
     height: 0px;
     margin: 0px;
     padding: 0px;
-    margin-bottom: -8px;
     border: 0px;
 }
 
 hr.mx_RoomView_myReadMarker {
     border-top: solid 1px #76cfa6;
     border-bottom: solid 1px #76cfa6;
-    margin-top: -1px;
-    margin-bottom: -1px;
+    margin-top: 0px;
 }
 
 .mx_RoomView_statusArea {

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -135,8 +135,8 @@ limitations under the License.
     z-index: 1;
     position: relative;
     width: 90px;
+    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
     margin-right: 10px;
-    margin-top: -6px;
 }
 
 .mx_EventTile .mx_MessageTimestamp {