Some UI improvements

resources/chatbox.scss

@@ -43,12 +43,11 @@
     border-bottom: 0;
 }
 #chat-online-content {
-    margin-top: 0.5em;
     margin-bottom: 0;
     overflow: hidden;
     overflow-wrap: break-word;
     overflow-y: auto;
-    max-height: 77vh;
+    max-height: calc(100% - 44px);
 }
 #chat-box {
     /*border: 1px solid #ccc;*/
@@ -80,7 +79,7 @@
     #chat-container {
         display: flex;
         width: 100%;
-        height: 90vh;
+        height: calc(100vh - 3em);;
         border: 1px solid #ccc;
         /*border-radius: 0 4px 0 0;*/
         border-bottom: 0;
@@ -96,18 +95,13 @@
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
 }
 .info-pic {
-    height: 90%;
-    border-radius: 50%;
-    padding: 0.05em;
-    border: 0.1px solid #ccc;
-    margin-left: 3em;
-    margin-bottom: 1.5px;
+    height: 100%;
 }
 .info-circle {
     position: absolute;
-    cx: 86%;
-    cy: 80%;
-    r: 6px;
+    cx: 12%;
+    cy: 12%;
+    r: 12%;
     stroke: white;
     stroke-width: 1;
 }
@@ -116,13 +110,17 @@
     font-size: 2em;
     font-weight: bold !important;
     display: flex;
+    align-items: center;
 }
 .info-name a {
     display: table-caption;
 }
 #chat-info {
-    border-bottom: 2px solid darkgray;
     display: flex;
+    align-items: center;
+    box-shadow: 0px 2px 3px rgb(0 0 0 / 20%);
+    position: relative;
+    z-index: 100;
 }
 #refresh-button {
     padding: 0;
@@ -192,9 +190,8 @@
 
 .chat {
     .active-span {
-        margin-top: 1em;
-        margin-right: 1em;
         color: #636363;
+        margin-right: 1em;
     }
 
     .unread-count {