Fix message overflow

server/src/main/resources/static/client.html

@@ -20,7 +20,7 @@
 	<div id="appDiv" class="hidden">
 		<div class="main column">
 			<div class="header row">Lingo</div>
-			<div class="body row scroll-y">
+			<div class="body row nofooter">
 				<div id="canvasDiv" class="hidden">
 					<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
 				</div>

server/src/main/resources/static/layout.css

@@ -46,6 +46,14 @@ body {
 
 .body.row {
 	top: 75px;
+	bottom: 50px;
+}
+
+.body.row.nofooter {
+	bottom: 0;
+}
+
+.body.row.noheader {
 	bottom: 0;
 }
 

server/src/main/resources/static/style.css

@@ -27,6 +27,7 @@ button:hover {
 	border-top: 1px solid black;
 	padding: 10px;
 	position: relative;
+	overflow-wrap: break-word;
 }
 
 .message-item.first {
@@ -37,10 +38,6 @@ button:hover {
 	color: green;
 }
 
-#messageList {
-	bottom: 50px;
-}
-
 #messageInput {
 	width: 100%;
 	height: 50px;