From 0e2a5b30938f2f31cf4bd28f7fbc4db0fb00ebbb Mon Sep 17 00:00:00 2001
From: fruye <fruye@noreply.codeberg.org>
Date: Wed, 15 Mar 2023 07:18:18 +0000
Subject: [PATCH] fix: Isolate unicode characters in display names (#9702)

This fixes a 'Follows you' badge on a profile page and account addresses in threads from being drawn backwards when an account has some special Unicode characters that change the direction of text in their name (i.e. U+202E RIGHT-TO-LEFT OVERRIDE).

Co-authored-by: fruye <fruye@unix.dog>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9702
Co-authored-by: fruye <fruye@noreply.codeberg.org>
Co-committed-by: fruye <fruye@noreply.codeberg.org>
---
 packages/client/src/components/global/MkUserName.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
index f1a4bfb22..4dfa91b18 100644
--- a/packages/client/src/components/global/MkUserName.vue
+++ b/packages/client/src/components/global/MkUserName.vue
@@ -1,5 +1,5 @@
 <template>
-<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+<Mfm :class="$style.root" :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
 </template>
 
 <script lang="ts" setup>
@@ -13,3 +13,9 @@ const props = withDefaults(defineProps<{
 	nowrap: true,
 });
 </script>
+
+<style lang="scss" module>
+.root {
+	unicode-bidi: isolate;
+}
+</style>