fix: add max-height to button menu on mobile

src/components/video-button/Video-button.component.ts

@@ -9,7 +9,7 @@ import styles from "./Video-button.styles.css?inline";
 import { closestElement } from "../../helpers/closest";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { createCommand } from "../../state";
+import { createCommand, connect } from "../../state";
 import { eventCode } from "../../helpers/event";
 import { isMobile } from "../../helpers/ismobile";
 
@@ -22,7 +22,7 @@ export class VideoButton extends LitElement {
    * Specifies the offset distance of the tooltip from the button.
    */
   @property({ type: Number, attribute: "tooltip-offset" })
-  tooltipOffset = 40;
+  tooltipOffset = isMobile() ? 30 : 40;
 
   /**
    * Determines whether the button should display a tooltip.
@@ -38,6 +38,10 @@ export class VideoButton extends LitElement {
   @property({ attribute: "tooltip-position" })
   tooltipPosition: Placement = "top";
 
+  @connect('isFullscreen')
+  @property({ type: Boolean, attribute: 'is-fullscreen', reflect: true })
+  isFullscreen: Boolean
+
   @query(".tooltip")
   tooltip: HTMLElement;
 

src/components/video-button/Video-button.styles.css

@@ -81,6 +81,13 @@ button {
   }
 }
 
+@media (max-width: 640px) {
+  :host(:not([is-fullscreen])) .menu {
+    max-height: 150px;
+    overflow: auto;
+  }
+}
+
 .menu .inner {
   padding: 0;
 }