black magic fixes to the lightbox

src/skins/vector/css/atoms/ImageView.css

@@ -31,8 +31,12 @@ limitations under the License.
     -webkit-box-ordinal-group: 1;
     order: 1;
     -webkit-flex: 1;
-    flex: 1 1 0;
+    flex: 1 1 10%;
     min-width: 60px;
+/*
+    background-color: #080;
+    height: 20px;
+*/
 }
 
 .mx_ImageView_content {
@@ -41,8 +45,8 @@ limitations under the License.
     /* min-width hack needed for FF */
     min-width: 0px;
     height: 90%;
-    -webkit-flex: 5;
+    -webkit-flex: 100;
-    flex: 5 5 0;
+    flex: 100 100 0;
 
     display: -webkit-flex;
     display: flex;
@@ -55,21 +59,28 @@ limitations under the License.
 .mx_ImageView_content img {
     max-width: 100%;
     /* can't use max-height as it interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
-    height: 100%;
+    max-height: 100%;
     /* object-fit hack needed for Chrome */
     object-fit: contain;
+    background-image: url('img/trans.png');
+}
+
+.mx_ImageView_labelWrapper {
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    overflow: auto;
 }
 
 .mx_ImageView_label {
     text-align: left;
-    display: inline-block;
+    display: flex;
-    width: 300px;
+    justify-content: center;
-    height: 300px;
+    flex-direction: column;
-    top: 50%;
+    padding-left: 60px;
-    margin-top: -150px;
+    padding-right: 60px;
-    position: absolute;
+    min-height: 100%;
     color: #fff;
-    padding: 60px;
 }
 
 .mx_ImageView_name {
@@ -83,7 +94,7 @@ limitations under the License.
 }
 
 .mx_ImageView_download {
-    display: inline-block;
+    display: table;
     margin-top: 28px;
     border-radius: 5px;
     background-color: #454545;
@@ -100,10 +111,18 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_ImageView_shim {
+    height: 30px;
+}
+
 .mx_ImageView_rhs {
     -webkit-box-ordinal-group: 3;
     order: 3;
     -webkit-flex: 1;
-    flex: 1 1 0;
+    flex: 1 1 10%;
     min-width: 300px;
+/*
+    background-color: #800;
+    height: 20px;
+*/
 }

src/skins/vector/views/atoms/ImageView.js

@@ -79,21 +79,27 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_ImageView_content">
                     <img src={this.props.src} style={style}/>
-                    <div className="mx_ImageView_label">
+                    <div className="mx_ImageView_labelWrapper">
-                        <div className="mx_ImageView_name">
+                        <div className="mx_ImageView_label">
-                            { this.props.mxEvent.getContent().body }
+                            <div className="mx_ImageView_shim">
-                        </div>
+                            </div>
-                        <div className="mx_ImageView_metadata">
+                            <div className="mx_ImageView_name">
-                            Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+                                { this.props.mxEvent.getContent().body }
-                        </div>
+                            </div>
-                        <div className="mx_ImageView_download">
+                            <div className="mx_ImageView_metadata">
-                            Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
+                                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
-                        </div>
+                            </div>
-                        <div className="mx_ImageView_button">
+                            <div className="mx_ImageView_download">
-                            View full screen
+                                Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
-                        </div>
+                            </div>
-                        <div className="mx_ImageView_button">
+                            <div className="mx_ImageView_button">
-                            Redact
+                                View full screen
+                            </div>
+                            <div className="mx_ImageView_button">
+                                Redact
+                            </div>
+                            <div className="mx_ImageView_shim">
+                            </div>
                         </div>
                     </div>
                 </div>