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,6 +45,5 @@ .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 @@ -17,6 +17,7 @@ +comingSoon: boolean, +competitorDescription: string, +commDescription: string, + +descriptionTextClassName?: string, }; function CompetitorFeature(props: Props): React.Node { @@ -26,6 +27,7 @@ comingSoon, competitorDescription, commDescription, + descriptionTextClassName = '', } = props; const headingClassName = classNames([typography.heading3, css.headingText]); @@ -36,6 +38,7 @@ const descriptionClassName = classNames([ typography.paragraph1, css.descriptionText, + 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;