From 58a75949c3b5daa07464ec2f9531a29ea7effe93 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 11 Jul 2019 14:44:52 +0100 Subject: [PATCH] Add a previous event safe area around action bar This 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. Part of https://github.com/vector-im/riot-web/issues/10185 Fixes https://github.com/vector-im/riot-web/issues/9650 --- res/css/views/messages/_MessageActionBar.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) 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;