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; }

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;
         }