From 0701d89bbeb7f6c6cfee9e583ed7cb16cfc05e06 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 25 Jun 2019 15:40:22 -0600
Subject: [PATCH] Fix upgrade warning being chopped off

The flex box was behaving a bit strange, so we just wrap the content and change `height: 235px` to `max-height: 235px` to get scrollbars.
---
 .../views/rooms/_RoomUpgradeWarningBar.scss   | 17 +++++++----
 .../views/rooms/RoomUpgradeWarningBar.js      | 30 ++++++++++---------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/res/css/views/rooms/_RoomUpgradeWarningBar.scss b/res/css/views/rooms/_RoomUpgradeWarningBar.scss
index fe81d3801a..1c477cedfe 100644
--- a/res/css/views/rooms/_RoomUpgradeWarningBar.scss
+++ b/res/css/views/rooms/_RoomUpgradeWarningBar.scss
@@ -15,17 +15,22 @@ limitations under the License.
 */
 
 .mx_RoomUpgradeWarningBar {
+    max-height: 235px;
+    background-color: $preview-bar-bg-color;
+    padding-left: 20px;
+    padding-right: 20px;
+    overflow: scroll;
+}
+
+.mx_RoomUpgradeWarningBar_wrapped {
+    width: 100%;
+    height: 100%;
+    display: flex;
     text-align: center;
-    height: 235px;
-    background-color: $event-selected-color;
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    display: flex;
-    background-color: $preview-bar-bg-color;
     -webkit-align-items: center;
-    padding-left: 20px;
-    padding-right: 20px;
 }
 
 .mx_RoomUpgradeWarningBar_header {
diff --git a/src/components/views/rooms/RoomUpgradeWarningBar.js b/src/components/views/rooms/RoomUpgradeWarningBar.js
index c2e2ba89d4..edde0a6865 100644
--- a/src/components/views/rooms/RoomUpgradeWarningBar.js
+++ b/src/components/views/rooms/RoomUpgradeWarningBar.js
@@ -97,20 +97,22 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_RoomUpgradeWarningBar">
-                <div className="mx_RoomUpgradeWarningBar_header">
-                    {_t(
-                        "This room is running room version <roomVersion />, which this homeserver has " +
-                        "marked as <i>unstable</i>.",
-                        {},
-                        {
-                            "roomVersion": () => <code>{this.props.room.getVersion()}</code>,
-                            "i": (sub) => <i>{sub}</i>,
-                        },
-                    )}
-                </div>
-                {doUpgradeWarnings}
-                <div className="mx_RoomUpgradeWarningBar_small">
-                    {_t("Only room administrators will see this warning")}
+                <div className="mx_RoomUpgradeWarningBar_wrapped">
+                    <div className="mx_RoomUpgradeWarningBar_header">
+                        {_t(
+                            "This room is running room version <roomVersion />, which this homeserver has " +
+                            "marked as <i>unstable</i>.",
+                            {},
+                            {
+                                "roomVersion": () => <code>{this.props.room.getVersion()}</code>,
+                                "i": (sub) => <i>{sub}</i>,
+                            },
+                        )}
+                    </div>
+                    {doUpgradeWarnings}
+                    <div className="mx_RoomUpgradeWarningBar_small">
+                        {_t("Only room administrators will see this warning")}
+                    </div>
                 </div>
             </div>
         );