From fc070779ba2a8a0668222dc7fd6fb39eb700d0bd Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Thu, 21 Apr 2022 04:38:37 -0700
Subject: prevent web keypad from stretching too wide

---
 web/static/style.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'web/static/style.css')

diff --git a/web/static/style.css b/web/static/style.css
index 0dc65f7..6bd312f 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -17,7 +17,7 @@ div#main {
 	margin: 2px;
 
 	display: grid;
-	grid-template-columns: 60vh 1fr;
+	grid-template-columns: min-content 2fr;
 	grid-template-rows: min-content 1fr;
 	grid-template-areas: "keypad settings-bar" "keypad match";
 }
@@ -27,6 +27,8 @@ div#keypad {
 
 	font-size: 2vh;
 
+	width: clamp(54vh, 30vw, 60vh);
+
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: min-content 2fr;
@@ -288,7 +290,7 @@ a:hover {
 	color: #7d0;
 }
 
-@media (max-aspect-ratio: 4/3) {
+@media (max-aspect-ratio: 1/1) {
 	div#main {
 		grid-template-columns: 1fr;
 		grid-template-rows: min-content 1fr 3fr;
@@ -298,6 +300,10 @@ a:hover {
 	div#keypad, div#match, div#settings-bar {
 		font-size: clamp(1.5vh, 2vw, 2vh);
 	}
+
+	div#keypad {
+		width: auto;
+	}
 }
 
 /*
-- 
cgit v1.2.3-70-g09d2