Fix emoji verification responsive layout (#31899)

* Extract SasEmoji to shared-components and improve responsive layout Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add baseline screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix e2e test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add SasEmoji snapshot test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add figma link Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve doc Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add new dir to crypto-web-reviewers codeowners as per ask Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-29 17:40:04 +00:00
parent 24018f7e94
commit e07e26cae5
23 changed files with 444 additions and 143 deletions
@@ -20,40 +20,9 @@ Please see LICENSE files in the repository root for full details.
 }

 .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-bottom: 16px;
-    position: relative;
-    width: 52px;
-}
-
-.mx_Dialog .mx_VerificationShowSas_emojiSas_block,
-.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block {
-    width: 60px;
-}
-
-.mx_VerificationShowSas_emojiSas_emoji {
-    font-size: $font-32px;
-    /* Use the Twemoji font for consistency with other clients */
-    font-family: Twemoji, var(--cpd-font-family-sans);
-}
-
-.mx_VerificationShowSas_emojiSas_label {
-    font-size: $font-12px;
-    word-break: break-word;
-}
-
-.mx_VerificationShowSas_emojiSas_break {
-    flex-basis: 100%;
-}
-
 .mx_VerificationShowSas_buttonRow {
    text-align: center;
    display: flex;