Fix issues with help box being unclosable when stuff moves around by giving it its own close button

thrimbletrimmer/edit.html

@@ -51,6 +51,7 @@
 		<div id="editor-help">
 			<a href="#" id="editor-help-link">Help</a>
 			<div id="editor-help-box" class="hidden">
+				<a id="editor-help-box-close">[X]</a>
 				<h2>Keyboard Shortcuts</h2>
 				<ul>
 					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>

thrimbletrimmer/index.html

@@ -64,6 +64,7 @@
 		<div id="editor-help">
 			<a href="#" id="editor-help-link">Help</a>
 			<div id="editor-help-box" class="hidden">
+				<a id="editor-help-box-close">[X]</a>
 				<h2>Keyboard Shortcuts</h2>
 				<ul>
 					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>

thrimbletrimmer/scripts/common.js

@@ -13,6 +13,12 @@ const PLAYBACK_RATES = [0.5, 1, 1.25, 1.5, 2];
 function commonPageSetup() {
 	const helpLink = document.getElementById("editor-help-link");
 	helpLink.addEventListener("click", toggleHelpDisplay);
+
+	const closeHelp = document.getElementById("editor-help-box-close");
+	closeHelp.addEventListener("click", (_event) => {
+		const helpBox = document.getElementById("editor-help-box");
+		helpBox.classList.add("hidden");
+	});
 }
 
 function toggleHelpDisplay() {

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -150,13 +150,8 @@ a,
 	top: 0;
 }
 
-#editor-help {
-	z-index: 1;
-}
-
 #editor-help-link {
 	float: right;
-	z-index: 5;
 }
 
 #editor-help-box {
@@ -171,6 +166,10 @@ a,
 	margin: 3px 0;
 }
 
+#editor-help-box-close {
+	float: right;
+}
+
 #range-definitions {
 	display: flex;
 	flex-direction: column;