Make chat component look nicer and upgrade websocket connection

nginx/nginx.conf.template

@@ -77,6 +77,18 @@ http {
             return 301 $BACKEND_ENDPOINT/;
         }
 
+        location $BACKEND_ENDPOINT/ws {
+            rewrite ^$BACKEND_ENDPOINT/(.*)$ /$1 break;
+            proxy_pass http://$BACKEND_HOST:$BACKEND_PORT/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
         location $BACKEND_ENDPOINT/ {
             rewrite ^$BACKEND_ENDPOINT/(.*)$ /$1 break;
             proxy_pass http://$BACKEND_HOST:$BACKEND_PORT/;

nginx/vue/src/components/util/Chat.vue

@@ -23,15 +23,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div>
+    <div class="flex flex-col place-content-around h-full">
         <div class="flex flex-col">
             <p v-for="message in messages" :key="message.id">
                 {{ message.text }}
             </p>
         </div>
-        <div class="flex flex-row">
         <input v-model="messageInput" @keyup.enter="sendMessage" />
         <Button @click="sendMessage">Send</Button>
     </div>
-    </div>
 </template>