Fix issues around chatroom textarea height and responsiveness

css/converse.css

@@ -5347,10 +5347,7 @@
         background: #818479; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-        font-weight: bold;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden; }
+        font-weight: bold; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
         color: #3AA569; }
@@ -6292,11 +6289,8 @@
         height: 100vh; } }
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
-      height: 289px;
       border-bottom-right-radius: 4px;
       border-bottom-left-radius: 4px;
-      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 55px);
       background-color: white;
       border-top: 0;
       width: 100%;
@@ -6330,8 +6324,7 @@
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
-        min-width: 200px;
-        height: calc(100% - 95px); }
+        min-width: 200px; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051;
@@ -6480,9 +6473,6 @@
     width: 100%;
     border: 1px solid #999; }
 
-@media screen and (max-width: 767px) {
-  #conversejs .chatbox .box-flyout .chatroom-body .chat-area {
-    height: calc(100vh - 55px); } }
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }
 #conversejs .chatbox.headlines .chat-body {

css/inverse.css

@@ -5403,10 +5403,7 @@ body {
         background: #818479; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-        font-weight: bold;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden; }
+        font-weight: bold; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
         color: #3AA569; }
@@ -6422,11 +6419,8 @@ body {
         height: 100vh; } }
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
-      height: 289px;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
-      height: -webkit-calc(100% - 62px);
-      height: calc(100% - 62px);
       background-color: white;
       border-top: 0;
       width: 100%;
@@ -6460,8 +6454,7 @@ body {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
-        min-width: 100%;
-        height: calc(100% - 95px); }
+        min-width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051;
@@ -6610,9 +6603,6 @@ body {
     width: 100%;
     border: 1px solid #999; }
 
-@media screen and (max-width: 767px) {
-  #conversejs .chatbox .box-flyout .chatroom-body .chat-area {
-    height: calc(100vh - 55px); } }
 #conversejs.fullscreen .chat-head-chatroom {
   height: 62px;
   font-size: 20px; }

mockup/chatroom.html

@@ -100,7 +100,6 @@
                                     <li class="participant occupant" title="Click to mention jabber the hut in your message.">
                                         <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
                                 </ul>
-
                                 <div class="chatroom-features">
                                     <p class="occupants-heading">Features</p>
                                     <ul class="features-list">

mockup/converse.html

@@ -51,9 +51,8 @@
                                 </span>
                             </div>
                             <div class="chat-message">
-                                <span class="chat-msg-author chat-msg-them">19:25&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-them">Benedict-John:&nbsp;</span>
+                                <span class="chat-msg-author chat-msg-them">
+                                    19:25&nbsp; <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
                                 </span>
                                 <span class="chat-msg-content">Dagsê</span>
                             </div>
@@ -122,86 +121,83 @@
                         <a class="chatbox-btn fa fa-close"></a>
                     </div>
 
-                    <div class="chat-body chatroom-body">
-                        <div class="row no-gutters">
-                            <div class="chat-area col-md-9 col-8">
-                                <div class="chat-content">
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
-                                            <span class="chat-msg-room">luke:&nbsp;</span>
-                                        </span>
-                                        <span class="chat-msg-content">leia: hi :)</span>
-                                    </div>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
-                                            <span class="chat-msg-room">leia:&nbsp;</span>
-                                        </span>
-                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                    </div>
-                                    <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
-                                            <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                        </span>
-                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                    </div>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
-                                            <span class="chat-msg-me">me:&nbsp;</span>
-                                        </span>
-                                        <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                    </div>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
-                                            <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                        </span>
-                                        <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                    </div>
+                    <div class="chat-body chatroom-body row no-gutters">
+                        <div class="chat-area col-md-9 col-8">
+                            <div class="chat-content">
+                                <div class="chat-message">
+                                    <span class="chat-msg-author chat-msg-room">18:50&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-room">luke:&nbsp;</span>
+                                    </span>
+                                    <span class="chat-msg-content">leia: hi :)</span>
+                                </div>
+                                <div class="chat-message">
+                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-room">leia:&nbsp;</span>
+                                    </span>
+                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                </div>
+                                <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                                <div class="chat-message">
+                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                    </span>
+                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                </div>
+                                <div class="chat-message">
+                                    <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-me">me:&nbsp;</span>
+                                    </span>
+                                    <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                                </div>
+                                <div class="chat-message">
+                                    <span class="chat-msg-author chat-msg-room">19:43&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                    </span>
+                                    <span class="chat-msg-content">Another message to check that scrolling works.</span>
                                 </div>
-                                <form class="sendXMPPMessage">
-                                    <ul class="chat-toolbar no-text-select">
-                                        <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-                                        <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                        <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
-                                    </ul>
-                                    <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
-                                </form>
                             </div>
+                            <form class="sendXMPPMessage">
+                                <ul class="chat-toolbar no-text-select">
+                                    <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
+                                    <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
+                                    <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
+                                </ul>
+                                <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
+                            </form>
+                        </div>
 
-                            <div class="occupants col-md-3 col-4">
-                                <p class="occupants-heading">Occupants:</p>
-                                <form class="pure-form room-invite">
-                                    <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
-                                    <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
-                                </form>
+                        <div class="occupants col-md-3 col-4">
+                            <p class="occupants-heading">Occupants:</p>
+                            <form class="pure-form room-invite">
+                                <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
+                                <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
+                            </form>
 
-                                <ul class="occupant-list">
-                                    <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                            <ul class="occupant-list">
+                                <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
+                                <li class="participant occupant" title="Click to mention leia in your message.">
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
+                                <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
+                                <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                            </ul>
+                            <div class="chatroom-features">
+                                <p class="occupants-heading">Features</p>
+                                <ul class="features-list">
+                                    <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
+                                    <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
+                                    <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
+                                    <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
+                                    <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
+                                    <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
                                 </ul>
-
-                                <div class="chatroom-features">
-                                    <p class="occupants-heading">Features</p>
-                                    <ul class="features-list">
-                                        <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
-                                        <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
-                                        <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
-                                        <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
-                                        <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
-                                        <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
-                                    </ul>
-                                </div>
                             </div>
                         </div>
                     </div>

sass/_chatbox.scss

@@ -171,9 +171,6 @@
 
                 .chat-msg-author {
                     font-weight: bold;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
                 }
                 .chat-msg-them {
                     color: $message-them-color;

sass/_chatrooms.scss

@@ -61,9 +61,7 @@
                 height: 100vh;
             }
             .chatroom-body {
-                height: 289px;
                 @include border-bottom-radius($chatbox-border-radius);
-                @include calc(height, '100% - #{$chat-head-height}');
                 background-color: white;
                 border-top: 0;
                 width: 100%;
@@ -103,8 +101,6 @@
                 .chat-area {
                     word-wrap: break-word; 
                     min-width: $chat-width;
-                    height: calc(100% - 95px);
-
                     .new-msgs-indicator {
                         background-color: $chatroom-head-color;
                         max-width: 70%;
@@ -272,7 +268,6 @@
             .box-flyout {
                 .chatroom-body {
                     .chat-area {
-                        height: calc(100vh - 55px);
                     }
                 }
             }