Fix RightNav elements focus outline on web (#8788)

src/view/shell/desktop/Feeds.tsx

@@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
 import {getCurrentRoute} from '#/lib/routes/helpers'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {emitSoftReset} from '#/state/events'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
@@ -30,7 +30,8 @@ export function DesktopFeeds() {
       <View
         style={[
           {
-            gap: 12,
+            gap: 10,
+            paddingVertical: 2,
           },
         ]}>
         {Array(5)
@@ -66,6 +67,7 @@ export function DesktopFeeds() {
            * height of the screen with lots of feeds.
            */
           paddingVertical: 2,
+          marginHorizontal: -2,
           overflowY: 'auto',
         }),
       ]}>
@@ -90,6 +92,10 @@ export function DesktopFeeds() {
               current
                 ? [a.font_bold, t.atoms.text]
                 : [t.atoms.text_contrast_medium],
+              web({
+                marginHorizontal: 2,
+                width: 'calc(100% - 4px)',
+              }),
             ]}
             numberOfLines={1}>
             {feedInfo.displayName}
@@ -100,7 +106,14 @@ export function DesktopFeeds() {
       <InlineLinkText
         to="/feeds"
         label={_(msg`More feeds`)}
-        style={[a.text_md, a.leading_snug]}
+        style={[
+          a.text_md,
+          a.leading_snug,
+          web({
+            marginHorizontal: 2,
+            width: 'calc(100% - 4px)',
+          }),
+        ]}
         numberOfLines={1}>
         {_(msg`More feeds`)}
       </InlineLinkText>

src/view/shell/desktop/RightNav.tsx

@@ -65,6 +65,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
       style={[
         gutters,
         a.gap_lg,
+        a.pr_2xs,
         web({
           position: 'fixed',
           left: '50%',
@@ -74,7 +75,10 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
             },
             ...a.scrollbar_offset.transform,
           ],
-          width: width + gutters.paddingLeft,
+          /**
+           * Compensate for the right padding above (2px) to retain intended width.
+           */
+          width: width + gutters.paddingLeft + 2,
           maxHeight: '100%',
           overflowY: 'auto',
         }),

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -82,6 +82,7 @@ function Inner() {
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}
+                  style={a.rounded_full}
                   onPress={() => {
                     logEvent('trendingTopic:click', {context: 'sidebar'})
                   }}>