From a38c7d5a7ff09998f73d00d2ae9f2cf4e6c89152 Mon Sep 17 00:00:00 2001 From: Talha12Shiekh Date: Mon, 3 Aug 2026 23:19:03 +0500 Subject: [PATCH] feat(web): add autoHeight prop to ResultCard to allow wrapping long titles --- packages/web/src/components/result/ResultCard.d.ts | 1 + packages/web/src/components/result/ResultCard.js | 2 ++ packages/web/src/styles/Card.js | 9 +++++---- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/web/src/components/result/ResultCard.d.ts b/packages/web/src/components/result/ResultCard.d.ts index 59d8688d80..547d1a8ed5 100644 --- a/packages/web/src/components/result/ResultCard.d.ts +++ b/packages/web/src/components/result/ResultCard.d.ts @@ -7,6 +7,7 @@ declare namespace ResultCardTree { children: React.ReactNode; href?: string; id?: string|number; + autoHeight?: boolean; } interface ImageProps extends React.HTMLAttributes { diff --git a/packages/web/src/components/result/ResultCard.js b/packages/web/src/components/result/ResultCard.js index 34922d51be..79cec9f084 100644 --- a/packages/web/src/components/result/ResultCard.js +++ b/packages/web/src/components/result/ResultCard.js @@ -39,10 +39,12 @@ ResultCard.propTypes = { target: types.stringRequired, id: oneOfType([types.string, types.number]), href: types.string, + autoHeight: types.bool, }; ResultCard.defaultProps = { target: '_blank', + autoHeight: false, }; export default ResultCard; diff --git a/packages/web/src/styles/Card.js b/packages/web/src/styles/Card.js index 89690a2dc8..2b4aea3b9b 100644 --- a/packages/web/src/styles/Card.js +++ b/packages/web/src/styles/Card.js @@ -39,7 +39,8 @@ const Card = styled('a')` (theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fff')}; - height: 300px; + height: ${props => (props.autoHeight ? 'auto' : '300px')}; + min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; @@ -55,9 +56,9 @@ const Card = styled('a')` width: 100%; font-size: 0.9rem; line-height: 1.2rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: ${props => (props.autoHeight ? 'normal' : 'nowrap')}; + overflow: ${props => (props.autoHeight ? 'visible' : 'hidden')}; + text-overflow: ${props => (props.autoHeight ? 'unset' : 'ellipsis')}; margin: 0; padding: 10px 0 8px; }