diff --git a/css/_popover.scss b/css/_popover.scss
index 2af5e8ed9..f89aa1036 100644
--- a/css/_popover.scss
+++ b/css/_popover.scss
@@ -10,14 +10,24 @@
     right: 0;
     width: 100%;
 }
-.popover-mousemove-padding-right {
+
+%vertical-popover-padding {
     height: 100%;
     position: absolute;
-    right: -20;
     top: 0;
     width: 40px;
 }
 
+.popover-mousemove-padding-left {
+    @extend %vertical-popover-padding;
+    left: -20px;
+}
+
+.popover-mousemove-padding-right {
+    @extend %vertical-popover-padding;
+    right: -20px;
+}
+
 /**
  * An invisible element is added to the top of the popover to ensure the mouse
  * stays over the popover when the popover's height is shrunk, which would then
diff --git a/react/features/base/popover/components/Popover.web.js b/react/features/base/popover/components/Popover.web.js
index 7435c3162..0d9458ae4 100644
--- a/react/features/base/popover/components/Popover.web.js
+++ b/react/features/base/popover/components/Popover.web.js
@@ -11,6 +11,7 @@ import React, { Component } from 'react';
  */
 const DIALOG_TO_PADDING_POSITION = {
     'left': 'popover-mousemove-padding-right',
+    'right': 'popover-mousemove-padding-left',
     'top': 'popover-mousemove-padding-bottom'
 };