display unbound + css fix for keybindings selection

2 files changed, 13 insertions, 1 deletions

diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx
index 1d11b6b..b7deed8 100644
--- a/components/keybindselector.tsx
+++ b/components/keybindselector.tsx
@@ -38,6 +38,7 @@ export default function KeybindSelector(props: {
 					}}
 				/>
 			)}
+			{props.value.length == 0 && <span className='placeholder'>Unbound</span>}
 		</div>;
 	}
 
diff --git a/styles/keybindselector.css b/styles/keybindselector.css
index cc57501..34c174f 100644
--- a/styles/keybindselector.css
+++ b/styles/keybindselector.css
@@ -1,10 +1,14 @@
-.keybind-selector-inner { padding: 27px 12px 10px; }
+.keybind-selector-inner {
+	padding: 27px 12px 6px;
+	min-height: 25px;
+}
 
 .keybind-selector > * { cursor: pointer !important; } 
 
 .keybind-selector-inner .keybind {
 	padding: 2px 4px 1px;
 	margin-right: 3px;
+	margin-bottom: 3px;
 	border-radius: 4px;
 	user-select: none;
 	cursor: pointer;
@@ -17,6 +21,13 @@
 	color: var(--c100);
 }
 
+.keybind-selector-inner .placeholder {
+	font-style: italic;
+	color: var(--c700);
+	margin-top: 2px;
+	display: inline-block;
+}
+
 .keybind-selector-inner .keybind:hover {
 	opacity: .7;
 }