.

lib/app/communications/style.scss

@@ -183,59 +183,87 @@
         >div {
             padding: 0 10px 10px;
         }
+    }
 
-        &+div {
-            flex: 1 1 auto;
-            overflow: auto;
-            margin-top: 8px;
+    .list-bar {
+        flex: 1 1 auto;
+        overflow: auto;
+        margin-top: 8px;
 
-            .msgdiv {
-                margin-top: 5px;
-                border-bottom: solid 1px lightgray;
-                padding: 3px 10px 5px;
-                line-height: 1.5rem;
-                white-space: normal;
-                word-break: break-word;
-                overflow: hidden;
-                font-size: .8125rem;
-                color: #333;
+        .item-div {
+            margin-top: 5px;
+            border-bottom: solid 1px lightgray;
+            padding: 3px 10px 5px;
+            line-height: 1.5rem;
+            white-space: normal;
+            word-break: break-word;
+            overflow: hidden;
+            font-size: .8125rem;
+            color: #333;
+            display: flex;
+            flex-direction: column;
 
-                &:last-child {
-                    border-bottom: none;
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .item-poster {
+            font-weight: bold;
+            align-self: flex-end;
+
+            .tooltip-wrapper>.tooltip-content {
+                font-weight: normal;
+            }
+        }
+
+        .item-content {
+            line-height: 1.2rem;
+            padding: 8px 20px;
+            border-radius: 5px;
+            white-space: pre-wrap;
+            word-break: break-word;
+            max-width: 240px;
+            margin-right: 10px;
+            background-color: #9eea6a;
+            align-self: flex-end;
+
+            a>svg {
+                width: 13px;
+                height: 13px;
+                fill: #2140fb;
+
+                &:hover {
+                    border-bottom: 1px solid;
                 }
             }
 
-            .msgposter {
-                font-weight: bold;
-
-                &+div {
-                    line-height: 1.2rem;
-                    padding: 8px 20px;
-                    background-color: rgb(244, 244, 244);
-                    border-radius: 5px;
-                    white-space: pre-wrap;
-                    text-align: left;
-                    word-break: break-word;
-
-                    &.txtself {
-                        max-width: 240px;
-                        margin-right: 10px;
-                        background-color: #9eea6a;
-                        display: inline-block;
-                    }
-
-                    &.txtother {
-                        max-width: 240px;
-                        margin-left: 10px;
-                        display: inline-block;
-                    }
-                }
-            }
-
-            .msgtime {
+            .item-status {
                 text-align: right;
-                color: #aaa;
-                font-size: .7rem;
+                margin-top: 3px;
+                font-weight: bold;
+                margin-right: -12px;
+                font-size: 10px;
+            }
+        }
+
+        .item-time {
+            align-self: flex-end;
+            color: #aaa;
+            font-size: .7rem;
+        }
+
+        &.item-other {
+
+            .item-poster,
+            .item-content {
+                align-self: flex-start;
+            }
+
+            .item-content {
+                background-color: rgb(244, 244, 244);
+                margin-right: unset;
+                margin-left: 10px;
             }
         }
     }