diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature-card.css --- a/landing/competitor-feature-card.css +++ b/landing/competitor-feature-card.css @@ -15,3 +15,7 @@ color: var(--violet-dark-100); margin-top: 16px; } + +.descriptionText { + min-height: 80px; +} diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature-card.react.js --- a/landing/competitor-feature-card.react.js +++ b/landing/competitor-feature-card.react.js @@ -40,6 +40,7 @@ comingSoon={comingSoon} competitorDescription={competitorDescription} commDescription={commDescription} + descriptionTextClassName={css.descriptionText} />

Read more

diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css --- a/landing/competitor-feature.css +++ b/landing/competitor-feature.css @@ -11,6 +11,9 @@ margin-bottom: 16px; flex-wrap: wrap; row-gap: 8px; + /* We use 34px to match the coming soon badge's height and this + keep everything aligned */ + min-height: 34px; } .headingText { @@ -42,7 +45,6 @@ .descriptionText { color: var(--white-80); - min-height: 80px; margin-top: 8px; } diff --git a/landing/competitor-feature.react.js b/landing/competitor-feature.react.js --- a/landing/competitor-feature.react.js +++ b/landing/competitor-feature.react.js @@ -40,6 +40,7 @@ +comingSoon: boolean, +competitorDescription: string | $ReadOnlyArray, +commDescription: string | $ReadOnlyArray, + +descriptionTextClassName?: string, }; function CompetitorFeature(props: Props): React.Node { @@ -49,6 +50,7 @@ comingSoon, competitorDescription, commDescription, + descriptionTextClassName = '', } = props; const headingClassName = classNames([typography.heading3, css.headingText]); @@ -59,10 +61,12 @@ const descriptionClassName = classNames([ typography.paragraph1, css.descriptionText, + descriptionTextClassName, ]); const descriptionMultiClassName = classNames([ typography.paragraph1, css.descriptionTextMutli, + descriptionTextClassName, ]); let comingSoonBadge; diff --git a/landing/feature-modal.css b/landing/feature-modal.css --- a/landing/feature-modal.css +++ b/landing/feature-modal.css @@ -1,7 +1,7 @@ .modalContainer { background-color: var(--comparison-cards); border-radius: 8px; - padding: 24px 32px; + padding: 32px; width: 624px; max-width: 90vw; max-height: 90vh;