diff --git a/src/components/Blog/BlogArticle/BlogArticle.style.ts b/src/components/Blog/BlogArticle/BlogArticle.style.ts index 0eed1363b..b228b07a2 100644 --- a/src/components/Blog/BlogArticle/BlogArticle.style.ts +++ b/src/components/Blog/BlogArticle/BlogArticle.style.ts @@ -170,11 +170,11 @@ export const BlogArticleContentContainer = styled(Box)(({ theme }) => ({ }, [theme.breakpoints.up('sm' as Breakpoint)]: { - margin: theme.spacing(4, 'auto'), + margin: theme.spacing(0, 'auto'), maxWidth: '100%', }, [theme.breakpoints.up('md' as Breakpoint)]: { - margin: theme.spacing(8, 'auto'), + margin: theme.spacing(0, 'auto'), maxWidth: '100%', }, [theme.breakpoints.up('lg' as Breakpoint)]: { @@ -195,10 +195,10 @@ export const BlogMetaContainer = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', - marginTop: theme.spacing(8), gap: theme.spacing(2), flexDirection: 'column', [theme.breakpoints.up('sm' as Breakpoint)]: { + marginTop: theme.spacing(8), alignItems: 'center', flexDirection: 'row', }, diff --git a/src/components/Blog/BlogArticle/BlogArticle.tsx b/src/components/Blog/BlogArticle/BlogArticle.tsx index 39600c4cb..16d6d6caf 100644 --- a/src/components/Blog/BlogArticle/BlogArticle.tsx +++ b/src/components/Blog/BlogArticle/BlogArticle.tsx @@ -75,58 +75,72 @@ export const BlogArticle = ({ return ( <> - - {!!tags?.data[0]?.attributes.Title ? ( - - {tags.data[0].attributes?.Title} - - ) : ( - - )} - {!!createdAt ? ( - - - {formatDate(publishedAt || createdAt)} - - {t('blog.minRead', { minRead: minRead })} - - ) : ( - - )} - - {title ? ( - {title} - ) : ( - - )} - - - {author?.data?.attributes?.Avatar.data?.attributes?.url ? ( - + + + {tags?.data[0]?.attributes.Title ? ( + + {tags.data[0].attributes?.Title} + ) : ( - + )} - {author?.data ? ( - - {author.data?.attributes.Name} - + {createdAt ? ( + + + {formatDate(publishedAt || createdAt)} + + {t('blog.minRead', { minRead: minRead })} + ) : ( - + )} - - - - + + {title ? ( + {title} + ) : ( + + )} + + {subtitle ? ( + + {subtitle} + + ) : ( + + )} + + + + {author?.data?.attributes?.Avatar.data?.attributes?.url ? ( + + ) : ( + + )} + {author?.data ? ( + + {author.data?.attributes.Name} + + ) : ( + + )} + + + + + {image?.data && ( - {subtitle ? ( - - {subtitle} - - ) : ( - - )} {content ? (