From 92a8d1353b4e6fe93e329e338d21e9b4d3f52c10 Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Sun, 17 Nov 2024 20:47:07 -0600
Subject: [PATCH] Fix keyboard shortcuts help visibility

---
 thrimbletrimmer/src/common/video.module.scss        | 13 +++++++++++++
 thrimbletrimmer/src/common/video.tsx                |  2 +-
 .../src/restreamer/Restreamer.module.scss           |  6 ------
 thrimbletrimmer/src/restreamer/Restreamer.tsx       |  4 +---
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/thrimbletrimmer/src/common/video.module.scss b/thrimbletrimmer/src/common/video.module.scss
index f543f05..9b7dcc4 100644
--- a/thrimbletrimmer/src/common/video.module.scss
+++ b/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;
+	}
+}
diff --git a/thrimbletrimmer/src/common/video.tsx b/thrimbletrimmer/src/common/video.tsx
index de8700d..59d05b5 100644
--- a/thrimbletrimmer/src/common/video.tsx
+++ b/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>
diff --git a/thrimbletrimmer/src/restreamer/Restreamer.module.scss b/thrimbletrimmer/src/restreamer/Restreamer.module.scss
index 162be21..ca3b789 100644
--- a/thrimbletrimmer/src/restreamer/Restreamer.module.scss
+++ b/thrimbletrimmer/src/restreamer/Restreamer.module.scss
@@ -14,12 +14,6 @@
 	float: right;
 }
 
-.keyboardShortcutHelp {
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
 .videoLinks a {
 	margin: 2px;
 }
diff --git a/thrimbletrimmer/src/restreamer/Restreamer.tsx b/thrimbletrimmer/src/restreamer/Restreamer.tsx
index 8be2858..ae4a4c2 100644
--- a/thrimbletrimmer/src/restreamer/Restreamer.tsx
+++ b/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