Add inline avatar for narrow screens.

1 files changed, 14 insertions, 0 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index fdcf9b7..c7a151e 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -127,6 +127,17 @@ table {
     display: none;
 }
 
+.message .from .avatar {
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 3px;
+    color: #fff;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 3px;
+}
+
 @media (min-width: 768px) {
     .conversation .avatar {
         height: 64px;
@@ -220,6 +231,9 @@ table {
         position: absolute;
         z-index: 10;
     }
+    .message .from .avatar {
+        display: none;
+    }
 }
 
 .message .from .address {