From e7465795dac25f0c860c119b91747d45461b726f Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Fri, 7 Jan 2022 11:11:19 +0800
Subject: [PATCH] fix name and text overflow on mobile devices

---
 src/Message.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Message.svelte b/src/Message.svelte
index 6ec6c9b..9568b9e 100644
--- a/src/Message.svelte
+++ b/src/Message.svelte
@@ -48,8 +48,8 @@
 </script>
 
 <div class="message">
-  <img src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/>
-  <div>
+  <img class="avatar" src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/>
+  <div class="content">
     <div class="name">{msg.from_name || ' '}</div>
     <div class="text">{@html msg.html}</div>
     <div class="time">{groupinfo[msg.group_id][1]} <a href={msgurl}><time datetime={iso_date} title={title}>{relative_dt}</time></a></div>
@@ -66,12 +66,17 @@
     border-radius: 5px;
     display: flex;
   }
-  img {
+  .avatar {
     padding-right: 0.5em;
   }
+  .content {
+    overflow: hidden;
+  }
   .name {
     white-space: nowrap;
     color: #1e90ff;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .text {
     white-space: pre-wrap;