webui: fix layout for firefox, flash the message only

webui.go

@@ -25,8 +25,6 @@ html, body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
-	
-	position: relative;
 }
 .banner {
 	height: 48px;
@@ -64,6 +62,12 @@ html, body {
 	font-size: 12px;
 	line-height: 18px;	
 	vertical-align: middle;
+	
+	transition: background-color 0.5s ease-out;
+}
+#state.alert {
+	background: lightyellow;
+	transition: initial;
 }
 .banner button {
 	float: right;
@@ -72,23 +76,15 @@ html, body {
     margin: 8px 8px 8px 0;
 }
 textarea {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 48px;
-	bottom: 0;
+	border: 0;
+	margin: 0;
+	height: calc(100% - 64px);
+	width: calc(100% - 16px);
+	padding: 8px 8px 4px 8px;
 	
 	resize: none;
 	outline: none;
 	box-shadow: none;
-	
-	border: 0;
-	background: #fff;
-	transition: background-color 0.5s ease-out;
-}
-textarea.alert {
-	background: lightyellow;
-	transition: initial;
 }
 
 @media screen and (max-width: 400px) {
@@ -115,7 +111,6 @@ The assistant gives helpful, detailed, and polite answers to the human's questio
 
 ### Human: What is the capital city of New Zealand?
 ### Assistant:</textarea>
-		
 		<script type="text/javascript">
 function main() {
 	const conversationID = "` + uuid.New().String() + `";
@@ -182,8 +177,8 @@ function main() {
 				$main.value += decoder.decode(singleReadResult.value);
 				$main.scrollTop = $main.scrollHeight;
 				
-				$main.className = 'alert';
-				setTimeout(() => { $main.className = ''; }, 1);
+				$state.className = 'alert';
+				setTimeout(() => { $state.className = ''; }, 1);
 				
 			}