web: implement prompt-aware keypad

1 files changed, 15 insertions, 3 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 8da0cbc..62cdcaa 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -22,11 +22,11 @@ div#main {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: min-content min-content 2fr 3fr;
-	grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad";
+	grid-template-areas: "settings-bar" "rem-bar" "visits" "controls";
 }
 
-div#keypad {
-	grid-area: keypad;
+div#controls {
+	grid-area: controls;
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
@@ -36,6 +36,18 @@ div#keypad {
 	grid-auto-rows: 1fr;
 }
 
+div#controls .keypad {
+	display: contents;
+}
+
+div#controls #keypad-init .key {
+	grid-column: 1 / -1;
+
+	padding-left: 0.4rem;
+
+	justify-content: left;
+}
+
 div#oi {
 	visibility: hidden;