From 3860488bb50ad33e229a07f268797d997e0ad85d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 1 Aug 2016 10:31:58 +0100
Subject: [PATCH] Fix notifications warning layout

For some reason, Chrome doesn't seem to make the central div in the
notifications warning wide enough, so it ends up wrapping. Fix this by making
the central div expand across the available space, instead of letting the
container for the close button do it.

Fixes https://github.com/vector-im/vector-web/issues/1687
---
 src/components/views/globals/MatrixToolbar.js             | 3 +--
 .../vector/css/vector-web/views/globals/MatrixToolbar.css | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js
index b176ff2e..a22e15ff 100644
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@@ -35,7 +35,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MatrixToolbar">
                 <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
+                <div className="mx_MatrixToolbar_content">
                     You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
                 </div>
                 <div className="mx_MatrixToolbar_close"><img src="img/cancel.svg" width="18" height="18" onClick={ this.hideToolbar } /></div>
@@ -43,4 +43,3 @@ module.exports = React.createClass({
         );
     }
 });
-
diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
index b5e91021..a8297f46 100644
--- a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
+++ b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
@@ -33,6 +33,11 @@ limitations under the License.
     margin-top: -2px;
 }
 
+.mx_MatrixToolbar_content {
+    -webkit-flex: 1;
+    flex: 1;
+}
+
 .mx_MatrixToolbar_link
 {
     color: #fff ! important;
@@ -41,10 +46,7 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar_close {
-    -webkit-flex: 1;
-    flex: 1;
     cursor: pointer;
-    text-align: right;
 }
 
 .mx_MatrixToolbar_close img {