From ba219579e02cea0343635474ee505247679fcc00 Mon Sep 17 00:00:00 2001 From: Ansh Sharma Date: Sat, 21 Mar 2026 00:51:53 +0530 Subject: [PATCH 1/5] ui: fix blog card title truncation and spacing Signed-off-by: Ansh Sharma --- src/components/Card/Card.style.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 21d446b791cb7..f29347878f98d 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -88,7 +88,12 @@ export const CardWrapper = styled.div` .post-content-block { padding: 1rem 2rem; - height: 8rem; + padding-bottom: 1.5rem; + height: auto; + min-height: 9rem; + display: flex; + flex-direction: column; + justify-content: space-between; } @media screen and (max-width: 1200px) and (min-width: 992px) { @@ -116,6 +121,11 @@ export const CardWrapper = styled.div` .post-title { font-size: 1.4rem; font-weight: 400; + margin: 0 -1rem 0.5rem -1rem; + padding: 0 1rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -125,9 +135,14 @@ export const CardWrapper = styled.div` height: auto; display: flex; margin-bottom: 0.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; .author { text-align: end; + overflow: hidden; + text-overflow: ellipsis; } .author, p { @@ -136,6 +151,9 @@ export const CardWrapper = styled.div` font-weight: 400; flex: auto; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .type { text-align: end; From 664df8a1ed303a60fecfeec98e76232569523847 Mon Sep 17 00:00:00 2001 From: Ansh Sharma Date: Sun, 22 Mar 2026 17:02:14 +0530 Subject: [PATCH 2/5] ui: implement truncation logic and improve blog card spacing Signed-off-by: Ansh Sharma --- src/components/Card/Card.style.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index f29347878f98d..112d563f59fce 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -102,19 +102,22 @@ export const CardWrapper = styled.div` } .post-content-block { - height: 10rem; + height: auto; + min-height: 10rem; } } @media screen and (max-width: 670px) and (min-width: 560px) { .post-content-block { - height: 10rem; + height: auto; + min-height: 10rem; } } @media screen and (max-width: 350px) { .post-content-block { - height: 10rem; + height: auto; + min-height: 10rem; } } @@ -123,10 +126,10 @@ export const CardWrapper = styled.div` font-weight: 400; margin: 0 -1rem 0.5rem -1rem; padding: 0 1rem; + white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } From d68e29e4a846901881acda176a243d7a1338e0d0 Mon Sep 17 00:00:00 2001 From: Ansh Sharma Date: Sat, 4 Apr 2026 11:41:10 +0530 Subject: [PATCH 3/5] ui: refactor card padding to fix resource overlap Signed-off-by: Ansh Sharma --- src/components/Card/Card.style.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 112d563f59fce..424d103588dc3 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -87,10 +87,10 @@ export const CardWrapper = styled.div` } .post-content-block { - padding: 1rem 2rem; + padding: 1rem 1rem 1.5rem 1rem; padding-bottom: 1.5rem; height: auto; - min-height: 9rem; + min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; @@ -98,7 +98,8 @@ export const CardWrapper = styled.div` @media screen and (max-width: 1200px) and (min-width: 992px) { .post-thumb-block { - height: 12rem; + height: auto; + min-height: 10rem; } .post-content-block { @@ -124,8 +125,9 @@ export const CardWrapper = styled.div` .post-title { font-size: 1.4rem; font-weight: 400; - margin: 0 -1rem 0.5rem -1rem; - padding: 0 1rem; + margin: 0 0 0.5rem 0; + padding: 0 ; + white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; @@ -135,6 +137,7 @@ export const CardWrapper = styled.div` } .post-meta-block { + padding: 0 1rem; height: auto; display: flex; margin-bottom: 0.5rem; @@ -166,6 +169,7 @@ export const CardWrapper = styled.div` } .readmore-btn-wrapper { + padding: 0 1rem; display: flex; justify-content: flex-start; } From 7f00f6d5b4583f273bb8adf088f8e10632d023cd Mon Sep 17 00:00:00 2001 From: Ansh Sharma Date: Mon, 20 Apr 2026 11:05:57 +0530 Subject: [PATCH 4/5] ui: fix card title clamping, spacing, and byline overflow Signed-off-by: Ansh Sharma --- src/components/Card/Card.style.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 424d103588dc3..2419b255b0105 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -87,8 +87,7 @@ export const CardWrapper = styled.div` } .post-content-block { - padding: 1rem 1rem 1.5rem 1rem; - padding-bottom: 1.5rem; + padding: 1rem 2rem 1.5rem 2rem; height: auto; min-height: 10rem; display: flex; @@ -126,7 +125,7 @@ export const CardWrapper = styled.div` font-size: 1.4rem; font-weight: 400; margin: 0 0 0.5rem 0; - padding: 0 ; + padding: 0; white-space: normal !important; display: -webkit-box; @@ -137,7 +136,6 @@ export const CardWrapper = styled.div` } .post-meta-block { - padding: 0 1rem; height: auto; display: flex; margin-bottom: 0.5rem; @@ -169,7 +167,6 @@ export const CardWrapper = styled.div` } .readmore-btn-wrapper { - padding: 0 1rem; display: flex; justify-content: flex-start; } From 0653ec1fdef5abdf8434ad2b4d8ccc4046493617 Mon Sep 17 00:00:00 2001 From: Ansh Sharma Date: Tue, 21 Apr 2026 15:29:47 +0530 Subject: [PATCH 5/5] ui: remove !important from white-space property Signed-off-by: Ansh Sharma --- src/components/Card/Card.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 2419b255b0105..fd6b0081430da 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -127,7 +127,7 @@ export const CardWrapper = styled.div` margin: 0 0 0.5rem 0; padding: 0; - white-space: normal !important; + white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;