From 25ea2882c466bf0bcffa124e440a83961364432e Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sat, 18 May 2024 06:29:38 +0200
Subject: [PATCH] Fix channel view on smaller devices

---
 packages/atlas/atlas.config.yml                           | 2 +-
 .../atlas/src/components/ChannelTitle/ChannelTitle.tsx    | 8 +++++++-
 .../src/views/viewer/ChannelView/ChannelView.styles.ts    | 8 ++++++++
 .../atlas/src/views/viewer/ChannelView/ChannelView.tsx    | 6 +++---
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
index 240bd24255..8f44166ac2 100644
--- a/packages/atlas/atlas.config.yml
+++ b/packages/atlas/atlas.config.yml
@@ -10,7 +10,7 @@ general:
   pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details
   joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links
   joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
-  appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
+  appContentFocus: '' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
   crtMaintenanceMode: false
 storage:
   assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried
diff --git a/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx b/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx
index a41cbfc982..3f64ad7c4a 100644
--- a/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx
+++ b/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { SvgActionCreatorToken, SvgActionVerified } from '@/assets/icons'
 import { Text, TextVariant } from '@/components/Text'
 import { TextBaseProps } from '@/components/Text/Text.styles'
-import { cVar } from '@/styles'
+import { cVar, media } from '@/styles'
 
 import { FlexBox } from '../FlexBox'
 
@@ -35,7 +35,13 @@ export const ChannelTitleText = styled(Text)`
 `
 
 const StyledFlexBox = styled(FlexBox)`
+  justify-content: center;
+
   path {
     fill: ${cVar('colorText')};
   }
+
+  ${media.sm} {
+    justify-content: start;
+  }
 `
diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts b/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts
index 881634190a..3c16cd1332 100644
--- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts
+++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
 import { SvgJoyTokenMonochrome16 } from '@/assets/icons'
+import { FlexBox } from '@/components/FlexBox'
 import { Tabs } from '@/components/Tabs'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
@@ -32,6 +33,12 @@ export const TitleSection = styled.div`
   }
 `
 
+export const FollowButtonWrapper = styled(FlexBox)`
+  > *:nth-child(1) {
+    width: 100%;
+  }
+`
+
 export const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -110,6 +117,7 @@ export const StyledChannelLink = styled(ChannelLink)`
   position: relative;
   width: fit-content;
   justify-self: start;
+  margin: 0 auto;
   border: solid 8px ${cVar('colorCoreBaseBlack')};
   border-radius: 100%;
   ${media.sm} {
diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
index 655f2a783a..f81ce7948d 100644
--- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
+++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx
@@ -10,7 +10,6 @@ import { SvgActionCheck, SvgActionFilters, SvgActionFlag, SvgActionMore, SvgActi
 import { ChannelTitle } from '@/components/ChannelTitle'
 import { EmptyFallback } from '@/components/EmptyFallback'
 import { FiltersBar, useFiltersBar } from '@/components/FiltersBar'
-import { FlexBox } from '@/components/FlexBox'
 import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
 import { NumberFormat } from '@/components/NumberFormat'
 import { ViewErrorFallback } from '@/components/ViewErrorFallback'
@@ -43,6 +42,7 @@ import {
   ChannelInfoContainer,
   CollectorsBoxContainer,
   FilterButton,
+  FollowButtonWrapper,
   NotFoundChannelContainer,
   StyledButton,
   StyledButtonContainer,
@@ -366,7 +366,7 @@ export const ChannelView: FC = () => {
               )}
             </StyledButtonContainer>
           ) : (
-            <FlexBox width="100%">
+            <FollowButtonWrapper width="100%">
               <ProtectedActionWrapper
                 title="You want to follow this channel?"
                 description={`Sign in to follow ${channel?.title}`}
@@ -391,7 +391,7 @@ export const ChannelView: FC = () => {
                 ]}
                 trigger={<Button icon={<SvgActionMore />} variant="tertiary" size="large" />}
               />
-            </FlexBox>
+            </FollowButtonWrapper>
           )}
 
           {channel?.id && (