message align left on oversize

src/components/error.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="errorBox" class="errorBox">
-    <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="/sym/ic_close_white_24px.svg" />
+    <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
     <div id="errorMessage" class="btnText">
       {{msg}}
     </div>
@@ -30,6 +30,7 @@ name: "error",
     width: 16rem;
     background-color: #E53935;
     border-radius: 15px;
+    box-shadow: 3px 3px 10px #111;
   }
   #errorBox{
     display: none;
@@ -39,14 +40,14 @@ name: "error",
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     color: #fff;
     font-family:Arial, "lucida console", sans-serif;
   }
   .errorBtn{
     position: absolute;
-    top: 0rem;
-    right: 0rem;
+    top: 0;
+    right: 0;
     background-color: #0000;
     box-shadow: none;
   }

src/components/message.vue

@@ -18,7 +18,7 @@ export default {
 <style scoped>
   .messageContainer{
     position: relative;
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
     width: calc(100% - 2rem);
     left: 1rem;
   }
@@ -28,10 +28,17 @@ export default {
     width: max-content;
     min-width: 5rem;
     max-width: calc(100% - 3rem);
-    padding: 1rem;
+    padding: 0.7rem 1rem 0.45rem 1rem;
     right: 0;
-    background-color: #42b983;
+    background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
   }
+
+  @media (min-width: 45rem){
+    .message{
+      margin-left: 0; margin-right: auto;
+      border-radius: 1rem 1rem 1rem 0;
+    }
+  }
 </style>

src/components/messageReceive.vue

@@ -18,7 +18,7 @@ export default {
 <style scoped>
   .messageContainer{
     position: relative;
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
     width: calc(100% - 2rem);
     left: 1rem;
   }
@@ -27,9 +27,9 @@ export default {
     width: max-content;
     min-width: 5rem;
     max-width: calc(100% - 3rem);
-    padding: 1rem;
+    padding: 0.7rem 1rem 0.45rem 1rem;
     left: 0;
-    background-color: #42a7b9;
+    background-color: #42b983;
     border-radius: 1rem 1rem 1rem 0;
     text-align: left;
   }

src/components/newMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
-    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
+    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 

src/main.js

@@ -34,7 +34,7 @@ socket.onopen = () => {
 socket.onerror = (error) => {
   console.log(`WebSocket error: ${error}`)
 }
-socket.onclose = () => show_error('session timed out (refresh)')
+socket.onclose = () => show_error('session ended (refresh)')
 socket.onmessage = (e) => {
   console.log(`data received => ${e.data}`)
   let msg = JSON.parse(e.data)