diff --git a/app/components/channel_list/index.tsx b/app/components/channel_list/index.tsx
index 952caf5c27..b9fa785bff 100644
--- a/app/components/channel_list/index.tsx
+++ b/app/components/channel_list/index.tsx
@@ -34,10 +34,21 @@ type ChannelListProps = {
     teamsCount: number;
 }
 
+const getTabletWidth = (teamsCount: number) => {
+    return TABLET_SIDEBAR_WIDTH - (teamsCount > 1 ? TEAM_SIDEBAR_WIDTH : 0);
+};
+
 const ChannelList = ({channelsCount, currentTeamId, iconPad, isTablet, teamsCount}: ChannelListProps) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
-    const tabletWidth = useSharedValue(TABLET_SIDEBAR_WIDTH);
+    const tabletWidth = useSharedValue(isTablet ? getTabletWidth(teamsCount) : 0);
+
+    useEffect(() => {
+        if (isTablet) {
+            tabletWidth.value = getTabletWidth(teamsCount);
+        }
+    }, [isTablet && teamsCount]);
+
     const tabletStyle = useAnimatedStyle(() => {
         if (!isTablet) {
             return {
@@ -48,12 +59,6 @@ const ChannelList = ({channelsCount, currentTeamId, iconPad, isTablet, teamsCoun
         return {maxWidth: withTiming(tabletWidth.value, {duration: 350})};
     }, [isTablet]);
 
-    useEffect(() => {
-        if (isTablet) {
-            tabletWidth.value = TABLET_SIDEBAR_WIDTH - (teamsCount > 1 ? TEAM_SIDEBAR_WIDTH : 0);
-        }
-    }, [isTablet, teamsCount]);
-
     let content;
 
     if (!currentTeamId) {