Fix keyboard shortcuts help visibility

thrimbletrimmer/src/common/video.module.scss

@@ -9,3 +9,16 @@
 .streamTimeSettingLabel {
 	margin-right: 3px;
 }
+
+.keyboardShortcutHelp {
+	position: absolute;
+	top: 0;
+	right: 0;
+	background: #222;
+	z-index: 1;
+	padding: 2px;
+
+	&[open] {
+		border: 1px solid #fff;
+	}
+}

thrimbletrimmer/src/common/video.tsx

@@ -350,7 +350,7 @@ export const KeyboardShortcuts: Component<KeyboardShortcutProps> = (
 	props: KeyboardShortcutProps,
 ) => {
 	return (
-		<details>
+		<details class={styles.keyboardShortcutHelp}>
 			<summary>Keyboard Shortcuts</summary>
 			<ul>
 				<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>

thrimbletrimmer/src/restreamer/Restreamer.module.scss

@@ -14,12 +14,6 @@
 	float: right;
 }
 
-.keyboardShortcutHelp {
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
 .videoLinks a {
 	margin: 2px;
 }

thrimbletrimmer/src/restreamer/Restreamer.tsx

@@ -65,9 +65,7 @@ export const Restreamer: Component = () => {
 					)}
 				</For>
 			</ul>
-			<div class={styles.keyboardShortcutHelp}>
-				<KeyboardShortcuts includeEditorShortcuts={false} />
-			</div>
+			<KeyboardShortcuts includeEditorShortcuts={false} />
 			<Suspense>
 				<Show when={defaultsData()}>
 					<RestreamerWithDefaults