Use flex column for occupant sidebar

css/converse.css

@@ -5915,7 +5915,6 @@ body.reset {
     font-size: 14px;
     left: 0;
     text-align: left;
-    overflow-y: scroll;
     overflow-x: hidden;
     border-radius: 4px; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
@@ -6169,6 +6168,7 @@ body.reset {
       width: 100%; } }
   #converse-embedded-chat .chatroom .box-flyout,
   #conversejs .chatroom .box-flyout {
+    overflow-y: hidden;
     width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatroom .box-flyout,
@@ -6235,6 +6235,9 @@ body.reset {
             min-width: 100%; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         overflow-x: hidden;
         overflow-y: hidden;
         vertical-align: top;
@@ -6246,9 +6249,12 @@ body.reset {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           padding: 0.3em 0;
           font-weight: bold; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+          font-size: 12px;
+          width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          bottom: 0.5em;
           width: 100%; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
@@ -6273,8 +6279,8 @@ body.reset {
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
             overflow-y: auto;
-            height: -webkit-calc(100% - 220px);
-            height: calc(100% - 220px); }
+            flex-basis: 0;
+            flex-grow: 1; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }

css/inverse.css

@@ -5981,7 +5981,6 @@ body {
     font-size: 16px;
     left: 0;
     text-align: left;
-    overflow-y: scroll;
     overflow-x: hidden;
     border-radius: 4px; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
@@ -6033,8 +6032,6 @@ body {
     display: block; } }
 #conversejs.fullscreen #controlbox {
   margin: 0; }
-  #conversejs.fullscreen #controlbox .controlbox-panes {
-    overflow-y: hidden; }
   #conversejs.fullscreen #controlbox .controlbox-pane {
     border-radius: 0; }
   #conversejs.fullscreen #controlbox .flyout {
@@ -6288,6 +6285,7 @@ body {
       width: 100%; } }
   #converse-embedded-chat .chatroom .box-flyout,
   #conversejs .chatroom .box-flyout {
+    overflow-y: hidden;
     width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatroom .box-flyout,
@@ -6354,6 +6352,9 @@ body {
             min-width: 100%; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         overflow-x: hidden;
         overflow-y: hidden;
         vertical-align: top;
@@ -6365,9 +6366,12 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
           padding: 0.3em 0;
           font-weight: bold; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+          font-size: 14px;
+          width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-          bottom: 0.5em;
           width: 100%; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
@@ -6392,8 +6396,8 @@ body {
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
             overflow-y: auto;
-            height: -webkit-calc(100% - 220px);
-            height: calc(100% - 220px); }
+            flex-basis: 0;
+            flex-grow: 1; }
           #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
             padding-top: 0; }
@@ -6518,15 +6522,7 @@ body {
       padding: 1em; }
       #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
         font-size: 18px; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-        bottom: 1em; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
-        height: -webkit-calc(100% - 212px);
-        height: calc(100% - 212px); }
-        #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
-          font-size: 14px;
-          width: 100%; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
         font-size: 14px; }
 #conversejs.fullscreen .chatroom .room-invite span .invited-contact {
   margin: 0 0 0.5em -1px; }

mockup/chatroom.html

@@ -8,7 +8,7 @@
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
 </head>
 
-<body>
+<body class="reset">
     <div id="conversejs" class="fullscreen">
         <div class="sidebar"></div>
         <div class="row no-gutters">
@@ -88,32 +88,69 @@
 
                             <div class="occupants col-md-3 col-4">
                                 <p class="occupants-heading">Occupants:</p>
-                                <form class="pure-form room-invite">
+                                <form class="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>
-                                <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 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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                        <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>
+                                    <div class="chatroom-features">
+                                        <p class="occupants-heading">Features</p>
+                                        <ul class="features-list">
+                                            <li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;Password required</li>
+                                            <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;Public</li>
+                                            <li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span>&nbsp;Open</li>
+                                            <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;Persistent</li>
+                                            <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;Non-anonymous</li>
+                                            <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;Unmoderated</li>
+                                        </ul>
+                                    </div>
+                            </div>
                         </div>
                     </div>
                 </div>

sass/_chatrooms.scss

@@ -68,6 +68,8 @@
         }
 
         .box-flyout {
+            overflow-y: hidden;
+
             width: 100%;
             @media screen and (max-height: $mobile-landscape-height) {
                 height: $mobile-chat-height;
@@ -135,6 +137,9 @@
                     }
                 }
                 .occupants {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
                     overflow-x: hidden;
                     overflow-y: hidden;
                     vertical-align: top;
@@ -142,14 +147,23 @@
                     border-left: 1px solid $text-color;
                     border-bottom-right-radius: $chatbox-border-radius;
                     padding: 0.5em;
+
                     .occupants-heading {
                         padding: 0.3em 0;
                         font-weight: bold;
                     }
+
+                    ul {
+                        li {
+                            &.feature {
+                                font-size: $font-size-small;
+                                width: 100%;
+                            }
+                        }
+                    }
+
                     .chatroom-features {
-                        bottom: 0.5em;
                         width: 100%;
-
                         .feature {
                             float: left;
                             margin-right: 0.5em;
@@ -175,7 +189,8 @@
 
                         &.occupant-list {
                             overflow-y: auto;
-                            @include calc(height, '100% - 220px');
+                            flex-basis: 0;
+                            flex-grow: 1;
                         }
                         &.features-list {
                             padding-top: 0;

sass/_controlbox.scss

@@ -371,7 +371,6 @@
             font-size: $font-size;
             left: 0;
             text-align: left;
-            overflow-y: scroll;
             overflow-x: hidden;
             border-radius: $chatbox-border-radius;
 

sass/inverse/_chatrooms.scss

@@ -45,20 +45,10 @@
                     .occupants-heading {
                         font-size: $font-size-large;
                     }
-                    .chatroom-features {
-                        bottom: $padding;
-                    }
                     ul {
                         &.occupant-list {
-                            @include calc(height, '100% - 212px');
                             li {
                                 font-size: $font-size-small;
-                                width: 100%;
-                            }
-                        }
-                        li {
-                            &.feature {
-                                font-size: $font-size-small;
                             }
                         }
                     }

sass/inverse/_controlbox.scss

@@ -2,10 +2,6 @@
     #controlbox {
         margin: 0;
 
-        .controlbox-panes {
-            overflow-y: hidden;
-        }
-
         .controlbox-pane {
             border-radius: 0;
         }