From 93080cd9d39fa16e1ded35dddff6e97e0fddb0d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Fri, 27 Feb 2026 06:20:47 +0100
Subject: [PATCH] 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"
/>
---
 ui/overflow_menu.js | 3 ++-
 ui/settings_menu.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/overflow_menu.js b/ui/overflow_menu.js
index e8cfe8dce..ed971f586 100644
--- a/ui/overflow_menu.js
+++ b/ui/overflow_menu.js
@@ -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';
 
diff --git a/ui/settings_menu.js b/ui/settings_menu.js
index 26154d701..c4e4b779f 100644
--- a/ui/settings_menu.js
+++ b/ui/settings_menu.js
@@ -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';