From 33ec73095e3a35b3399f9414753faee8d97f10ea Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Jan 2020 22:44:49 +0000
Subject: [PATCH 1/3] Apply the Olympic effect to SAS Emoji Verification

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../verification/_VerificationShowSas.scss    | 27 ++++++++++++++++---
 .../views/verification/VerificationShowSas.js |  6 +++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index a0da7e2539..72213072f9 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -28,21 +28,42 @@ limitations under the License.
 
 .mx_VerificationShowSas_emojiSas {
     text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 25px 0;
 }
 
 .mx_VerificationShowSas_emojiSas_block {
     display: inline-block;
-    margin-left: 15px;
-    margin-right: 15px;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    position: relative;
+    // allow the blocks to grow to space themselves evenly up to a limit of 100px
+    flex-grow: 1;
+    max-width: 100px;
 }
 
 .mx_VerificationShowSas_emojiSas_emoji {
     font-size: 48px;
 }
 
+.mx_UserInfo .mx_VerificationShowSas_emojiSas_emoji {
+    font-size: 32px; // in UserInfo use a smaller font-size to fit in a smaller space
+    width: 43px;
+    margin: 0 auto;
+}
+
 .mx_VerificationShowSas_emojiSas_label {
     text-align: center;
     font-weight: bold;
+    // allow the text to overflow the parent by 15px on each side
+    // this is to keep the width of the parent consistent for spacing centrally via flexbox
+    position: absolute;
+    left: -15px;
+    right: -15px;
+}
+
+.mx_VerificationShowSas_emojiSas_break {
+    flex-basis: 100%;
 }
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 40d3b96beb..38bc1bb40a 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -62,7 +62,9 @@ export default class VerificationShowSas extends React.Component {
                 </div>,
             );
             sasDisplay = <div className="mx_VerificationShowSas_emojiSas">
-                {emojiBlocks}
+                {emojiBlocks.slice(0, 4)}
+                <div className="mx_VerificationShowSas_emojiSas_break" />
+                {emojiBlocks.slice(4)}
             </div>;
             sasCaption = _t(
                 "Verify this user by confirming the following emoji appear on their screen.",
@@ -105,8 +107,8 @@ export default class VerificationShowSas extends React.Component {
 
         return <div className="mx_VerificationShowSas">
             <p>{sasCaption}</p>
-            <p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
             {sasDisplay}
+            <p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
             {confirm}
         </div>;
     }

From d17a2ff80c6f89674323796bca82f3eacfcc80e3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Jan 2020 22:54:45 +0000
Subject: [PATCH 2/3] clean up unused CSS rules

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/verification/_VerificationShowSas.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 72213072f9..32401bc446 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -36,7 +36,6 @@ limitations under the License.
 
 .mx_VerificationShowSas_emojiSas_block {
     display: inline-block;
-    text-align: center;
     margin-bottom: 30px;
     position: relative;
     // allow the blocks to grow to space themselves evenly up to a limit of 100px
@@ -50,12 +49,9 @@ limitations under the License.
 
 .mx_UserInfo .mx_VerificationShowSas_emojiSas_emoji {
     font-size: 32px; // in UserInfo use a smaller font-size to fit in a smaller space
-    width: 43px;
-    margin: 0 auto;
 }
 
 .mx_VerificationShowSas_emojiSas_label {
-    text-align: center;
     font-weight: bold;
     // allow the text to overflow the parent by 15px on each side
     // this is to keep the width of the parent consistent for spacing centrally via flexbox

From afecaa16622f4d2e42ee1842b19519df0cd154e9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Jan 2020 22:54:56 +0000
Subject: [PATCH 3/3] fix left margins in UserInfo

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/right_panel/_UserInfo.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 5e5b66f58a..81e4c396e7 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -211,7 +211,7 @@ limitations under the License.
         padding-bottom: 16px;
     }
 
-    .mx_UserInfo_scrollContainer:not(.mx_UserInfo_separator) {
+    .mx_UserInfo_container:not(.mx_UserInfo_separator) {
         padding-top: 16px;
         padding-bottom: 0;