Word wrap fixes; Names now overflow with ellipses

alexankitty · Nov 13, 2022 · 34321e9 · 34321e9
1 parent e626769
commit 34321e9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/ChatboxBot.html b/ChatboxBot.html
@@ -49,12 +49,12 @@
 
   <template id="chatmessage">
     <div>
-      <span class="meta">
+      <div class="meta">
         <span class="badges"></span>
         <span class="name"></span>
-      </span>
+      </div>
 
-      <span class="message"></span>
+      <div class="message"></div>
     </div>
   </template>
   <script src="js/locale.js" defer></script>

diff --git a/css/chat.css b/css/chat.css
@@ -91,7 +91,7 @@ html, body {
 
 #chatlog .message,
 #chatlog .meta {
-  display: inline;
+  display: inline-block;
 }
 
 #chatlog .meta {
@@ -100,36 +100,35 @@ html, body {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  vertical-align: sub;
+  vertical-align: middle;
+  max-width: 100%;
 }
 
 #chatlog .message {
-  word-wrap: break-word;
-  vertical-align: sub;
+  word-break: break-word;
+  vertical-align: middle;
+  padding-bottom: 5px;
 }
 
 #chatlog .badge {
   display: inline-block;
   margin-right: 5px;
   position: relative;
-  vertical-align: baseline;
+  vertical-align: middle;
 }
 
 #chatlog .badges {
-  vertical-align: text-top;
-}
-
-#chatlog .name {
-  text-overflow: ellipsis;
+  vertical-align: middle;
 }
 
 .pfp {
-  vertical-align: text-top;
+  vertical-align: middle;
   margin-right: 5px;
 }
 
 .message-emote {
-  vertical-align: sub;
+  vertical-align: middle;
+  margin-left: 5px;
 }
 
 .settingsWrap {