diff --git a/sites/public/src/components/listing/ListingViewSeeds.module.scss b/sites/public/src/components/listing/ListingViewSeeds.module.scss index 57ba535b85..904ad9478e 100644 --- a/sites/public/src/components/listing/ListingViewSeeds.module.scss +++ b/sites/public/src/components/listing/ListingViewSeeds.module.scss @@ -11,7 +11,8 @@ --subheading-margin: var(--seeds-s1); --subheading-margin-sm: var(--seeds-spacer-header); - &, p { + &, + p { overflow-wrap: anywhere; } } @@ -134,3 +135,16 @@ .link-no-gap { --link-interior-gap: 0; } + +.two-column-list { + columns: 2; + column-gap: var(--seeds-spacer-section); + @media (--md-down) { + columns: 1; + } +} + +.list-item { + list-style: disc; + margin-inline-start: var(--seeds-s5); +} diff --git a/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx b/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx index 347937dd28..66ab6d79df 100644 --- a/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx +++ b/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx @@ -34,6 +34,7 @@ import { CardList, ContentCardProps } from "../../patterns/CardList" import { OrderedCardList } from "../../patterns/OrderedCardList" import { ReadMore } from "../../patterns/ReadMore" import { DateSectionFlyer } from "./listing_sections/DateSection" +import styles from "./ListingViewSeeds.module.scss" export const getFilteredMultiselectQuestions = ( multiselectQuestions: ListingMultiselectQuestion[], @@ -140,15 +141,24 @@ export const getAccessibilityFeatures = (listing: Listing) => { const enabledFeatures = Object.entries(listing?.listingFeatures ?? {}) .filter(([_, value]) => value) .map((item) => item[0]) + const COLUMN_BREAKPOINT = 6 if (enabledFeatures.length > 0) { - return enabledFeatures.map((feature, index) => { - return `${t(`eligibility.accessibility.${feature}`)}${ - index < enabledFeatures.length - 1 ? ", " : "" - }` - }) + return ( +