diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index b7ba2ef27d..c629ca2aaa 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/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;