fix(popup): keep the room tab from stretching the popup

Chrome sizes the popup window to whatever the content claims it needs and
never shrinks that window back for the rest of the session. The clipping
rule that keeps content inside the fixed 360px body used a child
combinator for the room tab (#section-active > .info-card), which misses
#peerList -- it sits in a wrapper div. The sync tab's identical peer list
was covered by #tab-sync .info-card, so the room tab held the only
unclipped card in the popup: one overflowing peer row there left the
popup stuck at up to double width, including after switching back to
Sync.

Generalize the rule to .info-card so every card clips (cards that scroll
keep their own overflow-y), let the peer row's badge group wrap instead
of overflowing now that it would otherwise be cut off, wrap long room ids
and connection status text, and let the label/button rows in Sync and
Status wrap -- those were the next candidates with longer translations.

Verified against the built extension: no element in any tab can grow the
popup any more, in all 15 shipped locales.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

extension/popup.js

@@ -958,7 +958,7 @@ function updatePeerList(peers) {
             peerItem.style.cssText = 'position:relative; display:block; padding: 8px 0; border-bottom: 1px solid var(--border-soft);';
 
             const header = document.createElement('div');
-            header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding-right: 24px;';
+            header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; gap:6px; padding-right: 24px;';
 
             const nameSpan = document.createElement('span');
             nameSpan.style.cssText = 'display: inline-flex; align-items: center; max-width: 200px; overflow: hidden; white-space: nowrap;';
@@ -982,8 +982,11 @@ function updatePeerList(peers) {
 
             // Right-side badges + actions, kept in one group so they sit together
             // on the right instead of being scattered by the header's space-between.
+            // They wrap onto a second line when the row runs out of room — badges
+            // and the co-host button are nowrap, so without this a busy row (Solo +
+            // role badge + "give control") would push past the card instead.
             const rightGroup = document.createElement('div');
-            rightGroup.style.cssText = 'display:flex; align-items:center; gap:6px; flex-shrink:0;';
+            rightGroup.style.cssText = 'display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; min-width:0;';
 
             // Volume Icon (Top Right)
             if (p.volume !== undefined && p.volume !== null) {