From 6c04c19a7aefc388151e7f765858e91e3c43ef9f Mon Sep 17 00:00:00 2001
From: Ingrid <36052282+twigleingrid@users.noreply.github.com>
Date: Thu, 9 Dec 2021 10:41:33 +0100
Subject: [PATCH] Add vertical spacing between buttons when they go over
 multiple lines (#7314)

---
 res/css/_common.scss                           | 1 +
 res/css/views/settings/_CryptographyPanel.scss | 3 +++
 res/css/views/settings/_SecureBackupPanel.scss | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 6cd3792af1..29bb318266 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -413,6 +413,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     @mixin mx_DialogButton;
     margin-left: 0px;
     margin-right: 8px;
+    margin-bottom: 5px;
 
     // flip colours for the secondary ones
     font-weight: 600;
diff --git a/res/css/views/settings/_CryptographyPanel.scss b/res/css/views/settings/_CryptographyPanel.scss
index 095218addf..98dab47c59 100644
--- a/res/css/views/settings/_CryptographyPanel.scss
+++ b/res/css/views/settings/_CryptographyPanel.scss
@@ -20,4 +20,7 @@
 
 .mx_CryptographyPanel_importExportButtons {
     margin-bottom: 15px;
+    display: inline-flex;
+    flex-flow: wrap;
+    row-gap: 10px;
 }
diff --git a/res/css/views/settings/_SecureBackupPanel.scss b/res/css/views/settings/_SecureBackupPanel.scss
index a9dab06b57..e0cf898f43 100644
--- a/res/css/views/settings/_SecureBackupPanel.scss
+++ b/res/css/views/settings/_SecureBackupPanel.scss
@@ -34,6 +34,9 @@ limitations under the License.
 
 .mx_SecureBackupPanel_buttonRow {
     margin: 1em 0;
+    display: inline-flex;
+    flex-flow: wrap;
+    row-gap: 10px;
 
     :nth-child(n + 1) {
         margin-inline-end: 10px;