video stats

src/App.css

@@ -885,16 +885,13 @@ body {
 
 /* Connection Popover */
 .connection-popover {
-  position: absolute;
-  top: 100%;
-  left: 12px;
-  margin-top: 4px;
+  position: fixed;
   width: 216px;
   background-color: var(--background-floating, #1e1f22);
   border-radius: 8px;
   padding: 12px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
-  z-index: 2000;
+  z-index: 10000;
   color: var(--text-normal, #dbdee1);
   font-family: "gg sans", sans-serif;
   pointer-events: none;
@@ -903,8 +900,8 @@ body {
 .connection-popover::before {
   content: "";
   position: absolute;
-  top: -6px;
-  left: 20px;
+  top: 20px;
+  left: -6px;
   width: 12px;
   height: 12px;
   background-color: var(--background-floating);

src/chat/components/ChannelList.svelte

@@ -9,6 +9,7 @@
   const webrtc = getContext<WebRTCService>("webrtc");
 
   let hoveredPeer = $state<string | null>(null);
+  let popoverPos = $state<{ x: number; y: number } | null>(null);
   let showServerDropdown = $state(false);
   let contextMenu = $state<{
     peerIdHex: string;
@@ -200,8 +201,19 @@
                 {/if}
                 <div
                   class="voice-member-status-container"
-                  onmouseenter={() => isLocalUserInThisChannel && (hoveredPeer = peerIdHex)}
-                  onmouseleave={() => (hoveredPeer = null)}
+                  onmouseenter={(e) => {
+                    if (isLocalUserInThisChannel) {
+                      hoveredPeer = peerIdHex;
+                      const rect = (
+                        e.currentTarget as HTMLElement
+                      ).getBoundingClientRect();
+                      popoverPos = { x: rect.right + 12, y: rect.top - 10 };
+                    }
+                  }}
+                  onmouseleave={() => {
+                    hoveredPeer = null;
+                    popoverPos = null;
+                  }}
                   role="presentation"
                 >
                   <div class="voice-member-indicators">
@@ -216,9 +228,12 @@
                   {/if}
                 </div>
 
-                {#if isLocalUserInThisChannel && hoveredPeer === peerIdHex}
+                {#if isLocalUserInThisChannel && hoveredPeer === peerIdHex && popoverPos}
                   {@const stats = webrtc.peerStats.get(peerIdHex)}
-                  <div class="connection-popover">
+                  <div
+                    class="connection-popover"
+                    style="left: {popoverPos.x}px; top: {popoverPos.y}px;"
+                  >
                     <div class="popover-header">
                       <span class="popover-name">{chat.getUsername(vs.identity)}</span>
                       <span class="popover-status {voiceStatusColor}">

src/chat/services/webrtc/webrtc.svelte.ts

@@ -109,7 +109,22 @@ export class WebRTCService {
   get isSharingScreen() { return this.localMedia.isSharingScreen; }
   get isMuted() { return this.localMedia.isMuted; }
   get isDeafened() { return this.localMedia.isDeafened; }
-  get peerStats() { return this.voice.peerManager.peerStats; }
+  
+  peerStats = $derived.by(() => {
+    const combined = new Map(this.voice.peerManager.peerStats);
+    for (const [id, stats] of this.screen.peerManager.peerStats) {
+      const existing = combined.get(id);
+      if (existing) {
+        combined.set(id, {
+          ...existing,
+          video: stats.video,
+        });
+      } else {
+        combined.set(id, stats);
+      }
+    }
+    return combined;
+  });
 
   toggleMute = () => this.localMedia.toggleMute();
   toggleDeafen = () => this.localMedia.toggleDeafen();