diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx index a20baaf5..27516f66 100644 --- a/packages/react-chat/src/components/Channels/Channel.tsx +++ b/packages/react-chat/src/components/Channels/Channel.tsx @@ -172,4 +172,5 @@ const NotificationBagde = styled.div` display: flex; align-items: center; justify-content: center; + flex-shrink: 0; `; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 010d045b..9656057d 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -169,12 +169,12 @@ const ChannelsWrapper = styled.div` height: 100%; min-width: 196px; background-color: ${({ theme }) => theme.sectionBackgroundColor}; - padding: 10px 0.6%; + padding: 10px 16px; display: flex; flex-direction: column; `; const StyledCommunity = styled(Community)` - padding: 0 0 0 10px; + padding: 0 0 0 8px; margin: 0 0 16px; `; diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx index 06e7c2e8..d23a786d 100644 --- a/packages/react-chat/src/components/CommunityIdentity.tsx +++ b/packages/react-chat/src/components/CommunityIdentity.tsx @@ -47,6 +47,7 @@ const Logo = styled.img` const Name = styled.p` font-family: "Inter", sans-serif; font-weight: 500; + text-align: left; color: ${({ theme }) => theme.primary}; ${textMediumStyles} diff --git a/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx b/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx index c44f3f64..3b322aea 100644 --- a/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx +++ b/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx @@ -20,6 +20,7 @@ export const CommunitySkeleton = () => { const LogoSkeleton = styled(Skeleton)` border-radius: 50%; margin-right: 8px; + flex-shrink: 0; `; const Loading = styled.div`