Ensure long trending topic titles can wrap (#11141)

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -1,7 +1,5 @@
 import {View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {
   useTrendingSettings,
@@ -28,7 +26,7 @@ export function SidebarTrendingTopics() {
 
 function Inner() {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const ax = useAnalytics()
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingDisabled} = useTrendingSettingsApi()
@@ -54,7 +52,7 @@ function Inner() {
             size="tiny"
             color="secondary"
             shape="round"
-            label={_(msg`Trending options`)}
+            label={l`Trending options`}
             onPress={() => trendingPrompt.open()}
             style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
             <ButtonIcon icon={Ellipsis} size="xs" />
@@ -90,12 +88,11 @@ function Inner() {
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}
-                  style={[a.self_start]}
                   onPress={() => {
                     ax.metric('trendingTopic:click', {context: 'sidebar'})
                   }}>
                   {({hovered}) => (
-                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                    <View style={[a.flex_1, a.flex_row, a.gap_xs]}>
                       <Text
                         style={[
                           a.text_sm,
@@ -107,13 +104,13 @@ function Inner() {
                       </Text>
                       <Text
                         style={[
+                          a.flex_1,
                           a.text_sm,
                           a.leading_snug,
                           hovered
                             ? [t.atoms.text, a.underline]
                             : t.atoms.text_contrast_medium,
-                        ]}
-                        numberOfLines={1}>
+                        ]}>
                         {topic.displayName ?? topic.topic}
                       </Text>
                     </View>
@@ -126,9 +123,9 @@ function Inner() {
       </View>
       <Prompt.Basic
         control={trendingPrompt}
-        title={_(msg`Hide trending topics?`)}
-        description={_(msg`You can update this later from your settings.`)}
-        confirmButtonCta={_(msg`Hide`)}
+        title={l`Hide trending topics?`}
+        description={l`You can update this later from your settings.`}
+        confirmButtonCta={l`Hide`}
         onConfirm={onConfirmHide}
       />
     </>