fix(popover): set display before calculating width

Popover works by first creating a DOM element with display none
then having jquery calculate its width and new position and
then setting display to table. This does not work with p2p
connection stats, which are much wider than the default width
of the popover. What will happen is when display table is set,
the width will increase greatly so the positioning will be off.
The workaround here is to set display table as the default
display but toggle visibility instead.

css/_jitsi_popover.scss

@@ -3,7 +3,8 @@
     top: 0;
     left: 0;
     z-index: $jitsipopoverZ;
-    display: none;
+    display: table;
+    visibility: hidden;
     max-width: 300px;
     min-width: 100px;
     text-align: left;

modules/UI/util/JitsiPopover.js

@@ -36,9 +36,9 @@ const positionConfigurations = {
             const { element, target } = elements;
 
             $('.jitsipopover').css({
-                display: 'table',
                 left: element.left,
-                top: element.top
+                top: element.top,
+                visibility: 'visible'
             });
 
             // Move additional padding to the right edge of the popover and
@@ -72,9 +72,9 @@ const positionConfigurations = {
             const $jistiPopover = $('.jitsipopover');
 
             $jistiPopover.css({
-                display: 'table',
                 left: element.left,
-                top: element.top
+                top: element.top,
+                visibility: 'visible'
             });
             $jistiPopover.find('.arrow').css({ left: calcLeft });
             $jistiPopover.find('.jitsipopover__menu-padding')