From dc9fde39beccdeffa3f4c395b14721683ff9960f Mon Sep 17 00:00:00 2001
From: Hardcore Sushi <hardcore.sushi@disroot.org>
Date: Mon, 31 May 2021 15:19:25 +0200
Subject: [PATCH] Adjust avatar sizes & Fix horizontal overflow in chat history

---
 Cargo.lock                     |  4 ++--
 Cargo.toml                     |  4 ++--
 src/frontend/commons/style.css |  4 ++--
 src/frontend/index.css         | 23 ++++++++++++-----------
 src/frontend/login.html        |  3 +--
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 5a3f18d..92837e6 100644
--- a/Cargo.lock
+++ b/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",
diff --git a/Cargo.toml b/Cargo.toml
index 506212e..6ebaa1a 100644
--- a/Cargo.toml
+++ b/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"
diff --git a/src/frontend/commons/style.css b/src/frontend/commons/style.css
index d5c812c..4290ea4 100644
--- a/src/frontend/commons/style.css
+++ b/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%;
 }
 
diff --git a/src/frontend/index.css b/src/frontend/index.css
index d0911b5..317fb0a 100644
--- a/src/frontend/index.css
+++ b/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 {
diff --git a/src/frontend/login.html b/src/frontend/login.html
index 385c50f..ff9d008 100644
--- a/src/frontend/login.html
+++ b/src/frontend/login.html
@@ -58,8 +58,7 @@
                 padding: 10px 50px;
             }
             .avatar {
-                width: 7em;
-                height: 7em;
+                font-size: 3em;
             }
             #identity h2 {
                 text-align: center;