From 1941a8ba4127bd2e8e44366753ca120545d902c6 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 18 Dec 2020 18:12:58 -0700
Subject: [PATCH] Adjust styling to work with the grid to keep everything on
 screen.

---
 web/src/components/GameBoard.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/components/GameBoard.vue b/web/src/components/GameBoard.vue
index 05e2bed..c58296c 100644
--- a/web/src/components/GameBoard.vue
+++ b/web/src/components/GameBoard.vue
@@ -170,14 +170,19 @@ export default {
 	width: 95%;
 }
 
+h2 {
+	margin: 12px 0;
+}
+
 .team-container {
-	display: inline-block;
+	grid-template-rows: 50px 1fr;
+	display: grid;
 	width: 45%;
 }
 
 .answer-container {
+	justify-content: space-evenly;
 	flex-direction: column;
-	justify-content: stretch;
 	align-items: center;
 	display: flex;
 }
@@ -220,12 +225,12 @@ input[type="text"] {
 	border-radius: 7px;
 	border-width: 2px;
 	font-size: larger;
-	padding: 12px;
 	outline: none;
 	margin: 7px 0;
+	padding: 7px;
 	width: 90%;
 }
-input[type="text"]:active, input[type="text"]:focus {
+input[type="text"]:focus {
 	border-color: var(--board-background-text);
 }
 input[type="text"].team-answer {