From 92dbdade3954ddadc28c4d7c04b890333dd405b8 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 24 Oct 2017 12:24:15 -0700
Subject: [PATCH] fix(filmstrip-only): set width for toolbar popovers

The popovers in filmstrip only are displaying thinly.
As a quick workaround, set a width on them. There
should only be one anyway, which shows up when
talking while muted.
---
 css/_toolbars.scss                                     | 4 ++++
 react/features/toolbox/components/ToolbarButton.web.js | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 22fb5d155..cca312b8b 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -226,6 +226,10 @@
             width: 37px;
         }
 
+        .button-popover-message {
+            width: 100px;
+        }
+
         .toolbar-button-wrapper:first-child .button {
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js
index ea6d47e4e..5906cb9db 100644
--- a/react/features/toolbox/components/ToolbarButton.web.js
+++ b/react/features/toolbox/components/ToolbarButton.web.js
@@ -128,7 +128,11 @@ class ToolbarButton extends Component {
 
             children = ( // eslint-disable-line no-extra-parens
                 <InlineDialog
-                    content = { t(dataAttr, dataInterpolate) }
+                    content = {
+                        <div className = 'button-popover-message'>
+                            { t(dataAttr, dataInterpolate) }
+                        </div>
+                    }
                     isOpen = { Boolean(popupConfig) }
                     position = { position }>
                     { buttonComponent }