Fix some issues with help box when resizing the window

thrimbletrimmer/beta/index.html

@@ -44,7 +44,8 @@
 
 		<video id="video" class="video-js" controls preload="auto"></video>
 
-		<a href="#" id="keyboard-help">Help</a>
+		<div id="keyboard-help">
+			<a href="#" id="keyboard-help-link">Help</a>
 			<div id="keyboard-help-box" class="hidden">
 				<h2>Keyboard Shortcuts</h2>
 				<ul>
@@ -60,6 +61,7 @@
 					<li>Hyphen (-): Decrease playback speed one step</li>
 				</ul>
 			</div>
+		</div>
 		<a href="#" id="download">Download Video</a>
 	</body>
 </html>

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 {