Fix some issues with help box when resizing the window

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">
-		<div id="keyboard-help-box" class="hidden">
+			<a href="#" id="keyboard-help-link">Help</a>
-			<h2>Keyboard Shortcuts</h2>
+			<div id="keyboard-help-box" class="hidden">
-			<ul>
+				<h2>Keyboard Shortcuts</h2>
-				<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
+				<ul>
-				<li>K or Space: Toggle pause</li>
+					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
-				<li>J: Back 10 seconds</li>
+					<li>K or Space: Toggle pause</li>
-				<li>L: Forward 10 seconds</li>
+					<li>J: Back 10 seconds</li>
-				<li>Left arrow: Back 5 seconds</li>
+					<li>L: Forward 10 seconds</li>
-				<li>Right arrow: Forward 5 seconds</li>
+					<li>Left arrow: Back 5 seconds</li>
-				<li>Comma (,): Back 1 frame</li>
+					<li>Right arrow: Forward 5 seconds</li>
-				<li>Period (.): Forward 1 frame</li>
+					<li>Comma (,): Back 1 frame</li>
-				<li>Equals (=): Increase playback speed one step</li>
+					<li>Period (.): Forward 1 frame</li>
-				<li>Hyphen (-): Decrease playback speed one step</li>
+					<li>Equals (=): Increase playback speed one step</li>
-			</ul>
+					<li>Hyphen (-): Decrease playback speed one step</li>
+				</ul>
+			</div>
 		</div>
 		<a href="#" id="download">Download Video</a>
 	</body>

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 {

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 {