Adjust avatar sizes & Fix horizontal overflow in chat history

Cargo.lock

@@ -403,9 +403,9 @@ dependencies = [
 
 [[package]]
 name = "async-psec"
-version = "0.3.0"
+version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ecfe23adc9e2e5d9dd329ad27dd33d49a3e3a83f88ba8363f8b8438e294075d4"
+checksum = "6aa693cf79f81392aeffa439d2aae418d8d04816e86c0032a3e80e8b5df0b743"
 dependencies = [
  "aes-gcm",
  "async-trait",

Cargo.toml

@@ -13,10 +13,10 @@ async-psec = { version = "0.3", features = ["split"] }
 lazy_static = "1.4"
 socket2 = "0.4"
 rusqlite = { version = "0.25.1", features = ["bundled"] }
-ed25519-dalek = "1" #for singing
+ed25519-dalek = "1" #for singatures
 sha2 = "0.9"
 aes-gcm = "0.9"
-aes-gcm-siv = "0.10" #Database
+aes-gcm-siv = "0.10" #database encryption
 hkdf = "0.11"
 hex = "0.4"
 actix-web = "3"

src/frontend/commons/style.css

@@ -34,8 +34,8 @@ label {
 
 .avatar {
     margin-right: .5em;
-    width: 1.5em;
-    height: 1.5em;
+    width: 2.5em;
+    height: 2.5em;
     border-radius: 50%;
 }
 

src/frontend/index.css

@@ -120,7 +120,7 @@ button:hover::after {
     position: relative;
 }
 #avatarContainer .avatar {
-    font-size: 4em;
+    font-size: 2.5em;
 }
 #removeAvatar {
     position: absolute;
@@ -149,8 +149,7 @@ button:hover::after {
     font-size: 0.9em;
 }
 #session_info .avatar {
-    width: 6em;
-    height: 6em;
+    font-size: 2.5em;
     display: block;
     margin: auto;
 }
@@ -198,7 +197,6 @@ button:hover::after {
     padding: 10px;
     display: flex;
     align-items: center;
-    font-size: 1.7em;
     cursor: pointer;
 }
 #me>div {
@@ -207,6 +205,7 @@ button:hover::after {
     flex-grow: 1;
 }
 #me p {
+    font-size: 1.7em;
     margin: 0;
     font-weight: bold;
     display: inline;
@@ -214,6 +213,9 @@ button:hover::after {
 #me>div:hover p {
     color: var(--accent);
 }
+#me .avatar {
+    font-size: 1.2em;
+}
 #left_panel ul:last-of-type, #msg_log {
     flex-grow: 1;
 }
@@ -235,8 +237,7 @@ button:hover::after {
     flex-grow: 1;
 }
 #left_panel ul li .avatar {
-    width: 2em;
-    height: 2em;
+    font-size: .9em;
 }
 #left_panel ul li:hover, #left_panel ul li.current {
     background-color: #333940;
@@ -295,7 +296,6 @@ button:hover::after {
     flex-direction: row;
     align-items: center;
     padding: 20px 20px;
-    font-size: 1.5em;
 }
 #chat_header>div {
     display: flex;
@@ -307,6 +307,7 @@ button:hover::after {
     color: var(--accent);
 }
 #chat_header>div>p { /*name*/
+    font-size: 1.5em;
     font-weight: bold;
     margin: 0;
 }
@@ -406,11 +407,12 @@ button:hover::after {
     margin-bottom: 0;
 }
 #msg_log {
-    font-size: 1.1em;
     overflow-y: scroll;
-    white-space: pre;
+    white-space: pre-wrap;
 }
 #msg_log p {
+    font-size: 1.1em;
+    word-break: break-word;
     margin: 0;
 }
 #msg_log li .header {
@@ -423,8 +425,7 @@ button:hover::after {
     font-weight: bold;
 }
 #msg_log li .content {
-    margin-left: 2em;
-    margin-top: 5px;
+    margin-left: 3em;
     margin-bottom: 10px;
 }
 #msg_log a {

src/frontend/login.html

@@ -58,8 +58,7 @@
                 padding: 10px 50px;
             }
             .avatar {
-                width: 7em;
-                height: 7em;
+                font-size: 3em;
             }
             #identity h2 {
                 text-align: center;