3 files changed, 31 insertions, 27 deletions
diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx
index 22391cb24..3d5f08026 100644
--- a/src/components/RichText.tsx
+++ b/src/components/RichText.tsx
@@ -7,7 +7,6 @@ import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf'
 import {InlineLink} from '#/components/Link'
 import {Text, TextProps} from '#/components/Typography'
 import {toShortUrl} from 'lib/strings/url-helpers'
-import {getAgent} from '#/state/session'
 import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
 import {isNative} from '#/platform/detection'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -20,7 +19,6 @@ export function RichText({
   style,
   numberOfLines,
   disableLinks,
-  resolveFacets = false,
   selectable,
   enableTags = false,
   authorHandle,
@@ -30,31 +28,16 @@ export function RichText({
     testID?: string
     numberOfLines?: number
     disableLinks?: boolean
-    resolveFacets?: boolean
     enableTags?: boolean
     authorHandle?: string
   }) {
-  const detected = React.useRef(false)
-  const [richText, setRichText] = React.useState<RichTextAPI>(() =>
-    value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
+  const richText = React.useMemo(
+    () =>
+      value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
+    [value],
   )
   const styles = [a.leading_snug, flatten(style)]
 
-  React.useEffect(() => {
-    if (!resolveFacets) return
-
-    async function detectFacets() {
-      const rt = new RichTextAPI({text: richText.text})
-      await rt.detectFacets(getAgent())
-      setRichText(rt)
-    }
-
-    if (!detected.current) {
-      detected.current = true
-      detectFacets()
-    }
-  }, [richText, setRichText, resolveFacets])
-
   const {text, facets} = richText
 
   if (!facets?.length) {
diff --git a/src/components/TagMenu/index.web.tsx b/src/components/TagMenu/index.web.tsx
index 930e47a1a..31187112f 100644
--- a/src/components/TagMenu/index.web.tsx
+++ b/src/components/TagMenu/index.web.tsx
@@ -12,6 +12,8 @@ import {
   useUpsertMutedWordsMutation,
   useRemoveMutedWordMutation,
 } from '#/state/queries/preferences'
+import {enforceLen} from '#/lib/strings/helpers'
+import {web} from '#/alf'
 
 export function useTagMenuControl() {}
 
@@ -40,11 +42,12 @@ export function TagMenu({
       )) &&
       !(optimisticRemove?.value === sanitizedTag),
   )
+  const truncatedTag = enforceLen(tag, 15, true, 'middle')
 
   const dropdownItems = React.useMemo(() => {
     return [
       {
-        label: _(msg`See ${tag} posts`),
+        label: _(msg`See ${truncatedTag} posts`),
         onPress() {
           navigation.navigate('Search', {
             q: tag,
@@ -61,7 +64,7 @@ export function TagMenu({
       },
       authorHandle &&
         !isInvalidHandle(authorHandle) && {
-          label: _(msg`See ${tag} posts by this user`),
+          label: _(msg`See ${truncatedTag} posts by user`),
           onPress() {
             navigation.navigate({
               name: 'Search',
@@ -83,7 +86,9 @@ export function TagMenu({
         label: 'separator',
       },
       preferences && {
-        label: isMuted ? _(msg`Unmute ${tag}`) : _(msg`Mute ${tag}`),
+        label: isMuted
+          ? _(msg`Unmute ${truncatedTag}`)
+          : _(msg`Mute ${truncatedTag}`),
         onPress() {
           if (isMuted) {
             removeMutedWord({value: sanitizedTag, targets: ['tag']})
@@ -108,6 +113,7 @@ export function TagMenu({
     navigation,
     preferences,
     tag,
+    truncatedTag,
     sanitizedTag,
     upsertMutedWord,
     removeMutedWord,
@@ -119,7 +125,10 @@ export function TagMenu({
         accessibilityLabel={_(msg`Click here to open tag menu for ${tag}`)}
         accessibilityHint=""
         // @ts-ignore
-        items={dropdownItems}>
+        items={dropdownItems}
+        triggerStyle={web({
+          textAlign: 'left',
+        })}>
         {children}
       </NativeDropdown>
     </EventStopper>
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 138cc5330..7c0d4fbca 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -10,7 +10,7 @@ import {
   useRemoveMutedWordMutation,
 } from '#/state/queries/preferences'
 import {isNative} from '#/platform/detection'
-import {atoms as a, useTheme, useBreakpoints, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, useBreakpoints, ViewStyleProp, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@@ -260,9 +260,21 @@ function MutedWordRow({
           a.align_center,
           a.justify_between,
           a.rounded_md,
+          a.gap_md,
           style,
         ]}>
-        <Text style={[a.font_bold, t.atoms.text_contrast_high]}>
+        <Text
+          style={[
+            a.flex_1,
+            a.leading_snug,
+            a.w_full,
+            a.font_bold,
+            t.atoms.text_contrast_high,
+            web({
+              overflowWrap: 'break-word',
+              wordBreak: 'break-word',
+            }),
+          ]}>
           {word.value}
         </Text>