From 5306dc38d327353037c36af05c50c673cd07cf7f Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Tue, 24 Nov 2020 11:45:29 +0100
Subject: [PATCH] chat layout fix

---
 frontend/src/components/Chat.vue  | 28 +++++++++++++++++++++-------
 frontend/src/components/Lobby.vue |  3 +++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index 12fef7b..1528f07 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -1,11 +1,11 @@
 <template>
-	<div style="max-width: 350pt;">
+	<div class="chat">
 		<h3>Chat</h3>
 		<div id="chatbox">
 			<p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg">{{msg}}</p>
 			<p class="end">.</p>
 		</div>
-		<form @submit="sendChatMessage" style="width:100%; padding:0; display:flex;">
+		<form @submit="sendChatMessage" id="msg-form">
 			<input v-model="text" style="flex-grow:2;"/>
 			<input type="submit"/>
 		</form>
@@ -45,10 +45,24 @@ export default {
 	overflow-x: hidden;
 	overflow-wrap: break-word;
 	overflow-wrap: normal;
-	border: 1pt solid #ccc;
-	border-radius: 2pt;
+	border: 2pt solid #ccc;
+	border-radius: 4pt;
+}
+input {
+	margin:0;
+}
+.end {
+	height: 0pt;
+	margin-top: -1.5pt;
+}
+#msg-form {
+	width:100%;
+	padding:0;
+	display:flex;
+}
+@media only screen and (max-width:1000px) {
+	#msg-form {
+		flex-direction: column;
+	}
 }
-/* .chat-message:nth-last-of-type(1) {
-	margin-bottom: 50pt !important;
-} */
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 31d7bf1..495751e 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -238,5 +238,8 @@ export default {
 	.lobby {
 		flex-direction: row;
 	}
+	.chat {
+		max-width: 350pt;
+	}
 }
 </style>