From a949041ca8ecffdc2542e570fdb5c4d81e113ce7 Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Sat, 9 Oct 2021 18:21:15 -0500
Subject: [PATCH] Fix some issues with help box when resizing the window

---
 thrimbletrimmer/beta/index.html               | 32 ++++++++++---------
 thrimbletrimmer/beta/scripts/stream.js        |  4 +--
 .../beta/styles/thrimbletrimmer.css           |  5 +++
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/thrimbletrimmer/beta/index.html b/thrimbletrimmer/beta/index.html
index a20d017..c06100b 100644
--- a/thrimbletrimmer/beta/index.html
+++ b/thrimbletrimmer/beta/index.html
@@ -44,21 +44,23 @@
 
 		<video id="video" class="video-js" controls preload="auto"></video>
 
-		<a href="#" id="keyboard-help">Help</a>
-		<div id="keyboard-help-box" class="hidden">
-			<h2>Keyboard Shortcuts</h2>
-			<ul>
-				<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
-				<li>K or Space: Toggle pause</li>
-				<li>J: Back 10 seconds</li>
-				<li>L: Forward 10 seconds</li>
-				<li>Left arrow: Back 5 seconds</li>
-				<li>Right arrow: Forward 5 seconds</li>
-				<li>Comma (,): Back 1 frame</li>
-				<li>Period (.): Forward 1 frame</li>
-				<li>Equals (=): Increase playback speed one step</li>
-				<li>Hyphen (-): Decrease playback speed one step</li>
-			</ul>
+		<div id="keyboard-help">
+			<a href="#" id="keyboard-help-link">Help</a>
+			<div id="keyboard-help-box" class="hidden">
+				<h2>Keyboard Shortcuts</h2>
+				<ul>
+					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
+					<li>K or Space: Toggle pause</li>
+					<li>J: Back 10 seconds</li>
+					<li>L: Forward 10 seconds</li>
+					<li>Left arrow: Back 5 seconds</li>
+					<li>Right arrow: Forward 5 seconds</li>
+					<li>Comma (,): Back 1 frame</li>
+					<li>Period (.): Forward 1 frame</li>
+					<li>Equals (=): Increase playback speed one step</li>
+					<li>Hyphen (-): Decrease playback speed one step</li>
+				</ul>
+			</div>
 		</div>
 		<a href="#" id="download">Download Video</a>
 	</body>
diff --git a/thrimbletrimmer/beta/scripts/stream.js b/thrimbletrimmer/beta/scripts/stream.js
index 941a7cd..3ab2184 100644
--- a/thrimbletrimmer/beta/scripts/stream.js
+++ b/thrimbletrimmer/beta/scripts/stream.js
@@ -10,7 +10,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	await loadDefaults();
 	updateTimeSettings();
 
-	const helpLink = document.getElementById("keyboard-help");
+	const helpLink = document.getElementById("keyboard-help-link");
 	helpLink.addEventListener("click", toggleHelpDisplay);
 });
 
@@ -54,7 +54,7 @@ function updateSegmentPlaylist() {
 function toggleHelpDisplay() {
 	const helpBox = document.getElementById("keyboard-help-box");
 	if (helpBox.classList.contains("hidden")) {
-		const helpLink = document.getElementById("keyboard-help");
+		const helpLink = document.getElementById("keyboard-help-link");
 		helpBox.style.top = (helpLink.offsetTop + helpLink.offsetHeight) + "px";
 		helpBox.classList.remove("hidden");
 	} else {
diff --git a/thrimbletrimmer/beta/styles/thrimbletrimmer.css b/thrimbletrimmer/beta/styles/thrimbletrimmer.css
index dae2ad8..d1938a8 100644
--- a/thrimbletrimmer/beta/styles/thrimbletrimmer.css
+++ b/thrimbletrimmer/beta/styles/thrimbletrimmer.css
@@ -22,7 +22,12 @@
 }
 
 #keyboard-help {
+	z-index: 1;
+}
+
+#keyboard-help-link {
 	float: right;
+	z-index: 5;
 }
 
 #keyboard-help-box {