From 1955fff08cfb11761d9328718852270367269719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 25 Feb 2021 11:50:50 +0100
Subject: [PATCH] CSS cleanup
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     | 31 +++------
 src/components/views/elements/ImageView.js | 76 +++++++++++-----------
 2 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 4b786a244b..626878b03e 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -34,10 +34,9 @@ limitations under the License.
 }
 
 .mx_ImageView_image {
-    object-fit: contain;
     pointer-events: all;
 
-    max-width: 100vw;
+    max-width: 70vw;
     max-height: 70vh;
     min-width: 100px;
     min-height: 100px;
@@ -46,43 +45,33 @@ limitations under the License.
 .mx_ImageView_panel {
     width: 100%;
     height: 68px;
-    align-self: flex-start;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.mx_ImageView_toolbar {
-    padding-right: 16px;
-    right: 0;
-    display: flex;
-    align-items: center;
-}
-
-.mx_ImageView_toolbar_buttons {
-    display: flex;
-    align-items: center;
-    pointer-events: all;
-}
-
 .mx_ImageView_info_wrapper {
+    pointer-events: all;
     padding-left: 32px;
-    left: 0;
-    text-align: left;
     display: flex;
-    justify-content: center;
     flex-direction: row;
-    color: $lightbox-fg-color;
     align-items: center;
+    color: $lightbox-fg-color;
 }
 
 .mx_ImageView_info {
     padding-left: 12px;
-    pointer-events: all;
     display: flex;
     flex-direction: column;
 }
 
+.mx_ImageView_toolbar {
+    padding-right: 16px;
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+}
+
 .mx_ImageView_button {
     margin-left: 24px;
     display: block;
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 21b16ed89d..15bb25d473 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -308,45 +308,43 @@ export default class ImageView extends React.Component {
                     <div className="mx_ImageView_panel">
                         {info}
                         <div className="mx_ImageView_toolbar">
-                            <div className="mx_ImageView_toolbar_buttons">
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_rotateCW"
-                                    title={_t("Rotate Right")}
-                                    onClick={this.onRotateClockwiseClick}>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_rotateCCW"
-                                    title={_t("Rotate Left")}
-                                    onClick={ this.onRotateCounterClockwiseClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                                    title={_t("Zoom out")}
-                                    onClick={ this.onZoomOutClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                                    title={_t("Zoom in")}
-                                    onClick={ this.onZoomInClick }>
-                                </AccessibleTooltipButton>
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_download"
-                                    title={_t("Download")}
-                                    onClick={ this.onDownloadClick }>
-                                </AccessibleTooltipButton>
-                                <ContextMenuTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_more"
-                                    title={_t("Options")}
-                                    onClick={this.onOpenContextMenu}
-                                    inputRef={this.contextMenuButton}
-                                />
-                                <AccessibleTooltipButton
-                                    className="mx_ImageView_button mx_ImageView_button_close"
-                                    title={_t("Close")}
-                                    onClick={ this.props.onFinished }>
-                                </AccessibleTooltipButton>
-                                {this.renderContextMenu()}
-                            </div>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                                title={_t("Rotate Right")}
+                                onClick={this.onRotateClockwiseClick}>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                                title={_t("Rotate Left")}
+                                onClick={ this.onRotateCounterClockwiseClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                                title={_t("Zoom out")}
+                                onClick={ this.onZoomOutClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                                title={_t("Zoom in")}
+                                onClick={ this.onZoomInClick }>
+                            </AccessibleTooltipButton>
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_download"
+                                title={_t("Download")}
+                                onClick={ this.onDownloadClick }>
+                            </AccessibleTooltipButton>
+                            <ContextMenuTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_more"
+                                title={_t("Options")}
+                                onClick={this.onOpenContextMenu}
+                                inputRef={this.contextMenuButton}
+                            />
+                            <AccessibleTooltipButton
+                                className="mx_ImageView_button mx_ImageView_button_close"
+                                title={_t("Close")}
+                                onClick={ this.props.onFinished }>
+                            </AccessibleTooltipButton>
+                            {this.renderContextMenu()}
                         </div>
                     </div>
                     <div className="mx_ImageView_image_wrapper">