From 5620a50975869701400ff06fdf763cf5bced8cbe Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 5 May 2022 08:53:02 -0400
Subject: [PATCH] Fix channel item with long name and badge (#6222)

---
 .../channel_item/__snapshots__/channel_item.test.tsx.snap    | 4 ++--
 app/components/channel_item/channel_item.tsx                 | 5 +++--
 .../__snapshots__/threads_button.test.tsx.snap               | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/components/channel_item/__snapshots__/channel_item.test.tsx.snap b/app/components/channel_item/__snapshots__/channel_item.test.tsx.snap
index 0ca9a6f667..11913eb81e 100644
--- a/app/components/channel_item/__snapshots__/channel_item.test.tsx.snap
+++ b/app/components/channel_item/__snapshots__/channel_item.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               Object {
                 "color": "rgba(255,255,255,0.72)",
                 "marginTop": -1,
-                "paddingLeft": 12,
+                "paddingHorizontal": 12,
               },
               false,
               false,
@@ -204,7 +204,7 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               Object {
                 "color": "rgba(255,255,255,0.72)",
                 "marginTop": -1,
-                "paddingLeft": 12,
+                "paddingHorizontal": 12,
               },
               false,
               false,
diff --git a/app/components/channel_item/channel_item.tsx b/app/components/channel_item/channel_item.tsx
index 17c5296eb6..50b7c04349 100644
--- a/app/components/channel_item/channel_item.tsx
+++ b/app/components/channel_item/channel_item.tsx
@@ -55,7 +55,7 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     text: {
         marginTop: -1,
         color: changeOpacity(theme.sidebarText, 0.72),
-        paddingLeft: 12,
+        paddingHorizontal: 12,
     },
     highlight: {
         color: theme.sidebarText,
@@ -70,8 +70,9 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     badge: {
         position: 'relative',
         left: 0,
-        top: 0,
+        top: -2,
         alignSelf: undefined,
+        borderColor: theme.sidebarBg,
     },
     infoBadge: {
         color: theme.buttonColor,
diff --git a/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap b/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
index 0987655bd0..4fe72059a4 100644
--- a/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/threads_button/__snapshots__/threads_button.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Threads Component should match snapshot 1`] = `
             Object {
               "color": "rgba(255,255,255,0.72)",
               "marginTop": -1,
-              "paddingLeft": 12,
+              "paddingHorizontal": 12,
             },
             undefined,
             undefined,