fix(Toolbox) Maintain overflow button visible at all times

* fix(Toolbox) Maintain overflow button visible at all times

* Make changes only on desktop browser

css/_base.scss

@@ -201,3 +201,74 @@ form {
     background: rgba(0, 0, 0, .5);
     border-radius: 4px;
 }
+
+.desktop-browser {
+    @media only screen and (max-width: $smallScreen) {
+        .watermark {
+            width: 20%;
+            height: 20%;
+        }
+
+        .new-toolbox {
+            .toolbox-content {
+                .button-group-center, .button-group-left, .button-group-right {
+                    .toolbox-button {
+                        .toolbox-icon {
+                            width: 28px;
+                            height: 28px;
+                            svg {
+                                width: 18px;
+                                height: 18px;
+                            }
+                        }
+
+                        &:nth-child(2) {
+                            .toolbox-icon {
+                                width: 30px;
+                                height: 30px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: $verySmallScreen) {
+        #videoResolutionLabel {
+            display: none;
+        }
+        .vertical-filmstrip .filmstrip {
+            display: none;
+        }
+        .new-toolbox {
+            .toolbox-content {
+                .button-group-center, .button-group-left, .button-group-right {
+                    .settings-button-small-icon {
+                        display: none;
+                    }
+                    .toolbox-button {
+                        .toolbox-icon {
+                            width: 18px;
+                            height: 18px;
+                            svg {
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+
+                        &:nth-child(2) {
+                            .toolbox-icon {
+                                width: 20px;
+                                height: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .chrome-extension-banner {
+            display: none;
+        }
+    }
+}

css/_responsive.scss

@@ -1,136 +1,67 @@
-@media only screen and (max-width: $smallScreen) {
+@media only screen and (max-width: $verySmallScreen) {
-    .watermark {
+    .welcome {
-        width: 20%;
+        display: block;
-        height: 20%;
-    }
 
-    .new-toolbox {
+        #enter_room {
-        .toolbox-content {
+            position: relative;
-            .button-group-center, .button-group-left, .button-group-right {
+            height: 42px;
-                .toolbox-button {
-                    .toolbox-icon {
-                        width: 28px;
-                        height: 28px;
-                        svg {
-                            width: 18px;
-                            height: 18px;
-                        }
-                    }
 
-                    &:nth-child(2) {
+            .welcome-page-button {
-                        .toolbox-icon {
+            font-size: 16px;
-                            width: 30px;
+            left: 0;
-                            height: 30px;
+            position: absolute;
-                        }
+            top: 68px;
-                    }
+            text-align: center;
+            width: 100%;
+            }
+        }
+
+        .header {
+            background-color: #002637;
+
+            #enter_room {
+                .enter-room-input-container {
+                    padding-right: 0;
+                }
+
+                .warning-without-link,
+                .warning-with-link {
+                    top: 120px;
                 }
             }
         }
-    }
-}
 
-@media only screen and (max-width: $verySmallScreen) {
+        .welcome-tabs {
-  .welcome {
+            display: none;
-      display: block;
-
-      #enter_room {
-        position: relative;
-        height: 42px;
-
-        .welcome-page-button {
-          font-size: 16px;
-          left: 0;
-          position: absolute;
-          top: 68px;
-          text-align: center;
-          width: 100%;
         }
-      }
 
-      .header {
+        .header-text-title {
-          background-color: #002637;
+            text-align: center;
-
-          #enter_room {
-              .enter-room-input-container {
-                  padding-right: 0;
-              }
-
-              .warning-without-link,
-              .warning-with-link {
-                  top: 120px;
-              }
-          }
-      }
-
-      .welcome-tabs {
-          display: none;
-      }
-
-      .header-text-title {
-        text-align: center;
-      }
-
-      .welcome-cards-container {
-        padding: 0;
-      }
-
-      &.without-content {
-        .header {
-          height: 100%;
         }
-      }
 
-      #moderated-meetings {
+        .welcome-cards-container {
-          display: none;
+            padding: 0;
-      }
+        }
 
-      .welcome-footer-row-block {
+        &.without-content {
-          display: block;
+            .header {
-      }
+            height: 100%;
-      .welcome-badge {
+            }
-          margin-right: 16px;
+        }
-      }
 
-      .welcome-footer {
+        #moderated-meetings {
-          display: none;
+            display: none;
-      }
+        }
-  }
 
-    #videoResolutionLabel {
+        .welcome-footer-row-block {
-        display: none;
+            display: block;
-    }
+        }
-    .desktop-browser {
+        .welcome-badge {
-        .vertical-filmstrip .filmstrip {
+            margin-right: 16px;
+        }
+
+        .welcome-footer {
             display: none;
         }
     }
-    .new-toolbox {
-        .toolbox-content {
-            .button-group-center, .button-group-left, .button-group-right {
-                .settings-button-small-icon {
-                    display: none;
-                }
-                .toolbox-button {
-                    .toolbox-icon {
-                        width: 18px;
-                        height: 18px;
-                        svg {
-                            width: 12px;
-                            height: 12px;
-                        }
-                    }
-
-                    &:nth-child(2) {
-                        .toolbox-icon {
-                            width: 20px;
-                            height: 20px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .chrome-extension-banner {
-        display: none;
-    }
 }

react/features/toolbox/components/web/Toolbox.js

@@ -1221,7 +1221,7 @@ class Toolbox extends Component<Props, State> {
             t
         } = this.props;
         const overflowMenuContent = this._renderOverflowMenuContent();
-        const overflowHasItems = Boolean(overflowMenuContent.filter(child => child).length);
+        const overflowHasItems = Boolean(overflowMenuContent.length);
         const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
         const buttonsLeft = [];
         const buttonsRight = [];
@@ -1232,10 +1232,10 @@ class Toolbox extends Component<Props, State> {
         let minSpaceBetweenButtons = 48;
         let widthPlusPaddingOfButton = 56;
 
-        if (this.state.windowWidth <= verySmallThreshold) {
+        if (this.state.windowWidth <= verySmallThreshold && !isMobileBrowser()) {
             minSpaceBetweenButtons = 26;
             widthPlusPaddingOfButton = 28;
-        } else if (this.state.windowWidth <= smallThreshold) {
+        } else if (this.state.windowWidth <= smallThreshold && !isMobileBrowser()) {
             minSpaceBetweenButtons = 36;
             widthPlusPaddingOfButton = 40;
         }
@@ -1250,8 +1250,6 @@ class Toolbox extends Component<Props, State> {
             / 2 // divide by the number of groups(left and right group)
         );
 
-        const showOverflowMenu = this.state.windowWidth >= verySmallThreshold || isMobileBrowser();
-
         if (this._shouldShowButton('chat')) {
             buttonsLeft.push('chat');
         }
@@ -1265,7 +1263,7 @@ class Toolbox extends Component<Props, State> {
         if (this._shouldShowButton('closedcaptions')) {
             buttonsLeft.push('closedcaptions');
         }
-        if (overflowHasItems && showOverflowMenu) {
+        if (overflowHasItems) {
             buttonsRight.push('overflowmenu');
         }
         if (this._shouldShowButton('invite')) {
@@ -1288,13 +1286,13 @@ class Toolbox extends Component<Props, State> {
             movedButtons.push(...buttonsLeft.splice(
                 maxNumberOfButtonsPerGroup,
                 buttonsLeft.length - maxNumberOfButtonsPerGroup));
-            if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
+            if (buttonsRight.indexOf('overflowmenu') === -1) {
                 buttonsRight.unshift('overflowmenu');
             }
         }
 
         if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
-            if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
+            if (buttonsRight.indexOf('overflowmenu') === -1) {
                 buttonsRight.unshift('overflowmenu');
             }