web: give keypad list keys a max height

Bonus CSS shenanigans to create key gaps that behave.

1 files changed, 29 insertions, 1 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 0ebec5c..da03f7d 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -194,14 +194,42 @@ body {
 	display: contents;
 }
 
-#controls #keypad-list .key {
+#controls #keypad-list.visible {
 	grid-column: 1 / -1;
 
+	overflow: scroll;
+
+	display: flex;
+	flex-direction: column;
+}
+
+#controls #keypad-list .key {
+	height: 4em;
+	min-height: 2em;
+	margin-top: 2px;
 	padding-left: 0.4rem;
 
 	justify-content: left;
 }
 
+#controls #keypad-list .key:first-child {
+	margin-top: 0;
+}
+
+#controls #keypad-list:after {
+	flex-grow: 1;
+
+	content: '';
+	background-color: #1a1a1a;
+
+	/*
+	 * inner 2px top border. gives us a gap that disappears when the last
+	 * key reaches the bottom of the container and this section is not
+	 * displayed.
+	 */
+	box-shadow: inset 0 4px 0 -2px #111;
+}
+
 #controls #keypad-dartboard #dartboard-container {
 	grid-column: 1 / -1;