show/hide menu if elem hovered

css/_jitsi_popover.scss

@@ -15,13 +15,12 @@
     /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
     white-space: normal;
     margin-top: -10px;
-    margin-bottom: 35px;
 
     &__menu-padding {
-        height: 35px;
+        height: 10px;
         width: 100px;
         position: absolute;
-        bottom: -35px;
+        bottom: -10px;
     }
 
     &__showmore {

css/_videolayout_default.scss

@@ -113,11 +113,23 @@
 /**
  * Hovered video thumbnail.
  */
-#remoteVideos .videocontainer:hover {
+#remoteVideos .videocontainer {
+    .remotevideomenu {
+        display: none;
+    }
+
+    /**
+     * Show/hide items for hover event here
+     */
+    &:hover {
         cursor: hand;
         border: 2px solid $videoThumbnailHovered;
         box-shadow: inset 0 0 3px $videoThumbnailHovered,
             0 0 3px $videoThumbnailHovered;
+        .remotevideomenu {
+            display: inline-block;
+        }
+    }
 }
 
 #localVideoWrapper {

modules/UI/util/JitsiPopover.js

@@ -53,7 +53,8 @@ var JitsiPopover = (function () {
             `<div class="jitsipopover ${this.options.skin}">
                 ${arrow}
                 <div class="jitsipopover__content"></div>
-            <div class="jitsipopover__menu-padding"></div></div>`
+                <div class="jitsipopover__menu-padding"></div>
+            </div>`
         );
     };
 

modules/UI/videolayout/RemoteVideo.js

@@ -516,7 +516,7 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
     }
 
     $(streamElement).click(onClickHandler);
-},
+};
 
 /**
  * Show/hide peer container for the given id.