fix: tooltip causing page overflow (#994)

fix #991 related muxinc/elements#865
muxinc · Oct 1, 2024 · 135151f · 135151f
1 parent 3ccc78b
commit 135151f
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/js/media-chrome-button.ts b/src/js/media-chrome-button.ts
@@ -72,13 +72,18 @@ template.innerHTML = /*html*/ `
   }
 
   media-tooltip {
+    ${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */ ''}
+    max-width: 0;
+    overflow-x: hidden;
     opacity: 0;
-    transition: opacity .3s;
+    transition: opacity .3s, max-width 0s 9s;
   }
 
   :host(:hover) media-tooltip,
   :host(:focus-visible) media-tooltip {
+    max-width: 100vw;
     opacity: 1;
+    transition: opacity .3s;
   }
 
   :host([notooltip]) slot[name="tooltip"] {