Set column width for chatbox buttons in the sass file

css/converse.css

@@ -7224,7 +7224,15 @@ body.reset {
     margin-right: 0.5em; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {
-    flex-direction: row-reverse; }
+    flex-direction: row-reverse;
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+    flex: 0 0 25%;
+    max-width: 25%;
+    padding: 0; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;

sass/_chatbox.scss

@@ -53,6 +53,9 @@
 
         .chatbox-buttons {
             flex-direction: row-reverse;
+            @include make-col-ready();
+            @include make-col(3);
+            padding: 0;
         }
 
         .user-custom-message {

src/templates/chatbox_head.html

@@ -21,10 +21,8 @@
             </div>
         </div>
     </div>
-    <div class="col-sm-3 col-lg-2">
-        <div class="chatbox-buttons row no-gutters">
-            <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
-            <!-- <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a> -->
-        </div>
+    <div class="chatbox-buttons row no-gutters">
+        <a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
+        <!-- <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a> -->
     </div>
 </div>

src/templates/chatroom_head.html

@@ -8,12 +8,9 @@
         <p class="chatroom-description">{{{ o.description }}}<p/>
     </div>
 </div>
-<div class="col-sm-3 col-lg-2">
-    <div class="chatbox-buttons row no-gutters">
-        <a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
-        {[ if (o.affiliation == 'owner') { ]}
-        <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
-        {[ } ]}
-    </div>
+<div class="chatbox-buttons row no-gutters">
+    <a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
+    {[ if (o.affiliation == 'owner') { ]}
+    <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
+    {[ } ]}
 </div>
-