From 381c6a93a2f6058f0efc73e8da749bbc1930e195 Mon Sep 17 00:00:00 2001 From: Timo <6156589+Shik3i@users.noreply.github.com> Date: Sat, 15 Aug 2026 11:54:49 +0200 Subject: [PATCH] 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 --- extension/popup.html | 29 +++++++++++++++++------------ extension/popup.js | 7 +++++-- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/extension/popup.html b/extension/popup.html index f6522d9..8a8035e 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -1297,9 +1297,14 @@ .settings-issue-link a:hover { color: var(--accent); } - #section-join > .info-card, - #section-active > .info-card, - #tab-sync .info-card { + /* Every card clips horizontally. The popup body is a fixed 360px, but + Chrome sizes the popup window to whatever the content claims it needs + — and it never shrinks that window back for the rest of the session. + So a single unclipped card (the room tab's peer list used to be one, + because it sits in a wrapper div and the child combinator missed it) + is enough to leave the popup stuck at double width. Cards that scroll + vertically keep their own overflow-y via inline styles. */ + .info-card { position: relative; overflow: hidden; } @@ -1462,9 +1467,9 @@ -
- +
+
@@ -1813,7 +1818,7 @@
- Disconnected + Disconnected @@ -1826,15 +1831,15 @@ No tab selected or video detected.
-
- +
+
No activity yet
-
- +
+
diff --git a/extension/popup.js b/extension/popup.js index 6138b91..b464beb 100644 --- a/extension/popup.js +++ b/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) {