From 978bcc1ba9cb426c8da34a970a79a023936e3dbc Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 27 Feb 2024 16:04:49 -0600
Subject: Tags menu/muted words improvements (#3002)

* Fix translations

* Handle loooong words

* Truncate on desktop web, revert mobile changes

* Break the words

* Small enough for mobile web

* Fix alignment on mobile web

* Clarify
---
 src/components/dialogs/MutedWords.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'src/components/dialogs/MutedWords.tsx')

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>
 
-- 
cgit 1.4.1