Add a previous event safe area around action bar

res/css/views/messages/_MessageActionBar.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,6 +30,22 @@ limitations under the License.
     // Ensure the action bar appears above over things, like the read marker.
     z-index: 1;
 
+    // Adds a previous event safe area so that you can't accidentally hover the
+    // previous event while trying to mouse into the action bar or from the
+    // react button to its tooltip.
+    &::before {
+        content: '';
+        position: absolute;
+        // tooltip overhang + action bar + action bar offset from event
+        width: calc(48px + 100% + 8px);
+        // safe area + action bar
+        height: calc(20px + 100%);
+        top: -20px;
+        left: -48px;
+        z-index: -1;
+        cursor: initial;
+    }
+
     > * {
         white-space: nowrap;
         display: inline-block;