trying some stuff

src/components/ChatMessage.jsx

@@ -45,7 +45,7 @@ function ChatMessage({
       <div className="msgcont">
         <span className={className}>
           {(!isInfo && !isEvent) && (
-            <span className="chatname" key="name">
+            <span key="name">
               <img
                 alt=""
                 title={country}
@@ -55,8 +55,8 @@ function ChatMessage({
                   e.target.src = './cf/xx.gif';
                 }}
               />
-              &nbsp;
               <span
+                className="chatname"
                 style={{
                   color: setBrightness(colorFromText(name), isDarkMode),
                   cursor: 'pointer',
@@ -76,7 +76,8 @@ function ChatMessage({
                 }}
               >
                 {name}
-              </span>:
+              </span>
+              {': '}
             </span>
           )}
           <MarkdownParagraph refEmbed={refEmbed} pArray={pArray} />

src/styles/default.css

@@ -683,9 +683,11 @@ tr:nth-child(even) {
   display: flex;
 }
 .chatname {
-  font-size: 13px;
-  white-space: nowrap;
   padding-right: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100px; 
 }
 .chatts {
   color: #83839f;