From 26c066b4543bd61fcf3fa8e4ca184de15be359d5 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Fri, 4 Dec 2020 00:00:50 -0800
Subject: [PATCH] overflow hidden on message so word forces break; decrease
 maxlength of username to 60 chars. fix #417

---
 webroot/js/components/chat/message.js  | 2 +-
 webroot/js/components/chat/username.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index c5474c3dc..b3028e5dc 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -19,7 +19,7 @@ export default class Message extends Component {
         html`
           <div class="message message-name-change flex items-center justify-start p-3">
             <div class="message-content flex flex-row items-center justify-center text-sm w-full">
-              <div class="text-white text-center opacity-50 break-words">
+              <div class="text-white text-center opacity-50 overflow-hidden break-words">
                 <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
               </div>
             </div>
diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js
index 6caa73129..918a544aa 100644
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@@ -82,7 +82,7 @@ export default class UsernameForm extends Component {
             <input type="text"
               id="username-change-input"
               class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
-              maxlength="100"
+              maxlength="60"
               placeholder="Update username"
               defaultValue=${username}
               onKeydown=${this.handleKeydown}