From 7dd7aeffedc612827712a0b1ff91a3561f56f016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Dec 2020 18:19:11 +0100
Subject: [PATCH] Remove imageBox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/elements/_ImageView.scss     | 10 +++------
 src/components/views/elements/ImageView.js | 24 ++++++++++------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 10553a1c54..a2ca9c7927 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -26,21 +26,15 @@ limitations under the License.
 
 .mx_ImageView_content {
     width: 100%;
-    height: 100%;
 
     display: flex;
     flex-direction: column;
-}
 
-.mx_ImageView_imageBox {
     overflow: hidden;
-    display: flex;
-    padding: 0 50px 50px 50px;
-    flex-grow: 1;
 }
 
 .mainImage {
-    margin: auto;
+    //margin: auto;
 
     &:hover {
         cursor: grab;
@@ -56,6 +50,8 @@ limitations under the License.
     display: flex;
     justify-content: space-between;
     padding: 50px;
+    position: absolute;
+    width: 100%;
 }
 
 .mx_ImageView_toolbar {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 8cc55e40bf..9d747463f9 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -290,19 +290,17 @@ export default class ImageView extends React.Component {
                             </AccessibleButton>
                         </div>
                     </div>
-                    <div className="mx_ImageView_imageBox">
-                        <img
-                            src={this.props.src}
-                            title={this.props.name}
-                            style={style}
-                            className="mainImage"
-                            draggable={true}
-                            onMouseDown={this.onStartMoving}
-                            onMouseMove={this.onMoving}
-                            onMouseUp={this.onEndMoving}
-                            onMouseLeave={this.onEndMoving}
-                        />
-                    </div>
+                    <img
+                        src={this.props.src}
+                        title={this.props.name}
+                        style={style}
+                        className="mainImage"
+                        draggable={true}
+                        onMouseDown={this.onStartMoving}
+                        onMouseMove={this.onMoving}
+                        onMouseUp={this.onEndMoving}
+                        onMouseLeave={this.onEndMoving}
+                    />
                 </div>
             </FocusLock>
         );