ref(popover): allow for popover content from the right (#3302)

* ref(popover): allow for popover content from the right

Popovers contents can display to the left of the trigger
and above the trigger. Add the ability to display to the
right of the trigger my adding mouseover padding. This
may be needed for tile view, depending on where the triggers
are located.

* squash: abstract common css proprties into placeholder class

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

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'
 };