fix(UI): Add a gap to settings menu to avoid overlapping with the edge of the video (#9765)

Before:
<img width="863" height="372" alt="Before"
src="https://github.com/user-attachments/assets/1f5876fc-8e6c-441a-9948-b2f39041d9f4"
/>

After:
<img width="863" height="372" alt="After"
src="https://github.com/user-attachments/assets/98823e15-2217-4820-b2a1-b51017093c5a"
/>
This commit is contained in:
Álvaro Velad Galván
2026-02-27 06:20:47 +01:00
committed by GitHub
parent 097ee1c065
commit 93080cd9d3
2 changed files with 4 additions and 2 deletions
+2 -1
View File
@@ -235,8 +235,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
const paddingTop = parseFloat(styleMenu.paddingTop);
const paddingBottom = parseFloat(styleMenu.paddingBottom);
const rectContainer = this.videoContainer_.getBoundingClientRect();
const gap = 5;
const heightIntersection =
rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom;
rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom - gap;
this.overflowMenu_.style.maxHeight = heightIntersection + 'px';
+2 -1
View File
@@ -224,8 +224,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
const paddingTop = parseFloat(styleMenu.paddingTop);
const paddingBottom = parseFloat(styleMenu.paddingBottom);
const rectContainer = this.videoContainer_.getBoundingClientRect();
const gap = 5;
const heightIntersection =
rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom;
rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom - gap;
this.menu.style.maxHeight = heightIntersection + 'px';