Merge pull request #4018 from matrix-org/dbkr/truncate_sas

Truncate SAS emoji labels to fit
pull/21833/head
David Baker 2020-01-31 16:23:50 +00:00 committed by GitHub
commit 9d343a4705
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 11 deletions

View File

@ -1,5 +1,6 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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; overflow-x: hidden;
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
min-width: 250px; min-width: 264px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

View File

@ -1,5 +1,6 @@
/* /*
Copyright 2019 New Vector Ltd. Copyright 2019 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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 { .mx_VerificationShowSas_emojiSas_block {
display: inline-block; display: inline-block;
margin-bottom: 30px; margin-bottom: 16px;
position: relative; position: relative;
// allow the blocks to grow to space themselves evenly up to a limit of 100px width: 52px;
flex-grow: 1;
max-width: 100px;
} }
.mx_VerificationShowSas_emojiSas_emoji { .mx_VerificationShowSas_emojiSas_emoji {
@ -52,12 +51,9 @@ limitations under the License.
} }
.mx_VerificationShowSas_emojiSas_label { .mx_VerificationShowSas_emojiSas_label {
font-weight: bold; overflow: hidden;
// allow the text to overflow the parent by 15px on each side white-space: nowrap;
// this is to keep the width of the parent consistent for spacing centrally via flexbox text-overflow: ellipsis;
position: absolute;
left: -15px;
right: -15px;
} }
.mx_VerificationShowSas_emojiSas_break { .mx_VerificationShowSas_emojiSas_break {