From 03058bacbd07dfda8bb1ef34926a7861d51d3ee4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 28 May 2020 16:48:50 +0100
Subject: [PATCH] Dialog wrap title instead of taking same space as the
 close/cancel button

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/_common.scss                       | 3 +++
 src/components/views/dialogs/BaseDialog.js | 1 +
 2 files changed, 4 insertions(+)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 03442ca510..ebeeb381e6 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -335,6 +335,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
     text-align: center;
 }
+.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
+    margin-right: 20px; // leave space for the 'X' cancel button
+}
 
 .mx_Dialog_title.danger {
     color: $warning-color;
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 67d70aabe4..e59b6bbaf5 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -144,6 +144,7 @@ export default createReactClass({
                 >
                     <div className={classNames('mx_Dialog_header', {
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                        'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                             {headerImage}