From 90ed8636b8468f5e59d2f962a6a40e9c026e5987 Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Fri, 17 May 2024 12:46:54 +0300
Subject: [PATCH] fix(campaign-news): Adjust initial article height with font's
 lineHeight This way the See more, See less buttons wont be visible if text is
 just around the height limit

---
 .../client/campaign-news/CampaignNewsList.tsx         | 10 +++++++---
 .../client/campaigns/CampaignNewsSection.tsx          | 11 +++++++----
 src/components/common/QuillStyleWrapper.tsx           |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/client/campaign-news/CampaignNewsList.tsx b/src/components/client/campaign-news/CampaignNewsList.tsx
index 3d2a5277d..06453c79f 100644
--- a/src/components/client/campaign-news/CampaignNewsList.tsx
+++ b/src/components/client/campaign-news/CampaignNewsList.tsx
@@ -81,7 +81,9 @@ type Props = {
 
 export default function CampaignNewsList({ articles }: Props) {
   const { t, i18n } = useTranslation('news')
-  const INITIAL_HEIGHT_LIMIT = 400
+
+  const LINE_HEIGHT = theme.typography.body1.lineHeight
+  const INITIAL_HEIGHT_LIMIT = 400 * Number(LINE_HEIGHT)
   const [isExpanded, expandContent] = useShowMoreContent()
   return (
     <>
@@ -131,10 +133,12 @@ export default function CampaignNewsList({ articles }: Props) {
                   maxWidth: 1200,
                 }}>
                 <Grid container item direction={'column'} gap={1}>
-                  <Typography className={classes.articleHeader}>{article.title}</Typography>
+                  <Typography component={'h2'} className={classes.articleHeader}>
+                    {article.title}
+                  </Typography>
                   <QuillStypeWrapper>
                     <Typography
-                      component={'div'}
+                      component={'article'}
                       className={classes.articleDescription}
                       dangerouslySetInnerHTML={{
                         __html: sanitizedDescription,
diff --git a/src/components/client/campaigns/CampaignNewsSection.tsx b/src/components/client/campaigns/CampaignNewsSection.tsx
index fa4a19709..7d7c00dfc 100644
--- a/src/components/client/campaigns/CampaignNewsSection.tsx
+++ b/src/components/client/campaigns/CampaignNewsSection.tsx
@@ -113,7 +113,7 @@ const StyledTimeline = styled(Timeline)(({ theme }) => ({
     padding: 0,
   },
 
-  [`div.${classes.articleDescription} > p`]: {
+  [`article.${classes.articleDescription} > p`]: {
     margin: 0,
   },
 
@@ -162,7 +162,8 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
   const { t, i18n } = useTranslation('news')
   const { small }: { small: boolean } = useMobile()
 
-  const INITIAL_HEIGHT_LIMIT = 200
+  const LINE_HEIGHT = theme.typography.body1.lineHeight
+  const INITIAL_HEIGHT_LIMIT = 200 * Number(LINE_HEIGHT)
   const [isExpanded, expandContent] = useShowMoreContent()
 
   return (
@@ -249,7 +250,9 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                     )}
                     <Grid container gap={1} direction={'column'} className={classes.articleContent}>
                       <Grid item>
-                        <Typography className={classes.articleHeader}>{article.title}</Typography>
+                        <Typography component={'h2'} className={classes.articleHeader}>
+                          {article.title}
+                        </Typography>
                       </Grid>
                       <Grid
                         container
@@ -265,7 +268,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
                         }}>
                         <QuillStypeWrapper>
                           <Typography
-                            component={'div'}
+                            component={'article'}
                             className={classes.articleDescription}
                             dangerouslySetInnerHTML={{
                               __html: sanitizedDescription,
diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx
index 5fd76b003..99f8019f9 100644
--- a/src/components/common/QuillStyleWrapper.tsx
+++ b/src/components/common/QuillStyleWrapper.tsx
@@ -7,7 +7,7 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
   },
 
   ['p']: {
-    fontSize: theme.spacing(2),
+    fontSize: theme.typography.pxToRem(16),
     fontWeight: 400,
     lineHeight: theme.spacing(2.85),
   },