From 0555d3623cf5eea744bd26b4343c60ec66e43aa3 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 26 Aug 2025 21:43:25 +0200
Subject: Fix RightNav elements focus outline on web (#8788)

---
 src/view/shell/desktop/Feeds.tsx                 | 19 ++++++++++++++++---
 src/view/shell/desktop/RightNav.tsx              |  6 +++++-
 src/view/shell/desktop/SidebarTrendingTopics.tsx |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx
index 7a56722cc..441b35e3b 100644
--- a/src/view/shell/desktop/Feeds.tsx
+++ b/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>
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 26795e0fd..1e000340a 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/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',
         }),
diff --git a/src/view/shell/desktop/SidebarTrendingTopics.tsx b/src/view/shell/desktop/SidebarTrendingTopics.tsx
index 6b49f5834..c8ef49ee7 100644
--- a/src/view/shell/desktop/SidebarTrendingTopics.tsx
+++ b/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'})
                   }}>
-- 
cgit 1.4.1