From 29024c5172207624e250cd065f7c657459c5a8c9 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 31 Jan 2020 15:28:58 +0000
Subject: [PATCH] Truncate SAS emoji labels to fit

This keeps the layout of the emoji fixed as much as possible.

Other changes:
 * Fix width of each emoji container to static 52px
 * Bump minimum width of right panel from 250px to 264px to match the
   width in the figma
 * Use normal font-weight for labels as per design
 * Smaller vertical gap between emojis, again to match design
---
 res/css/structures/_RightPanel.scss              |  3 ++-
 .../views/verification/_VerificationShowSas.scss | 16 ++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 973f6fe9b3..3c373e8883 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,7 +19,7 @@ limitations under the License.
     overflow-x: hidden;
     flex: 0 0 auto;
     position: relative;
-    min-width: 250px;
+    min-width: 264px;
     display: flex;
     flex-direction: column;
 }
diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss
index 32401bc446..80677094ba 100644
--- a/res/css/views/verification/_VerificationShowSas.scss
+++ b/res/css/views/verification/_VerificationShowSas.scss
@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -36,11 +37,9 @@ limitations under the License.
 
 .mx_VerificationShowSas_emojiSas_block {
     display: inline-block;
-    margin-bottom: 30px;
+    margin-bottom: 16px;
     position: relative;
-    // allow the blocks to grow to space themselves evenly up to a limit of 100px
-    flex-grow: 1;
-    max-width: 100px;
+    width: 52px;
 }
 
 .mx_VerificationShowSas_emojiSas_emoji {
@@ -52,12 +51,9 @@ limitations under the License.
 }
 
 .mx_VerificationShowSas_emojiSas_label {
-    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;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .mx_VerificationShowSas_emojiSas_break {