department-of-veterans-affairs / va.gov-cms

Editor-centered management for Veteran-centered content.
https://prod.cms.va.gov
GNU General Public License v2.0
99 stars 68 forks source link

Adopt spotlight-card class on spotlight cards on Vet Centers and VBA #18126

Closed laflannery closed 5 months ago

laflannery commented 5 months ago

Description

An editor add a naked link into one of their spotlights. Because these do not wrap natively, the spotlights did not keep their equal widths and instead one became much larger than the others to accommodate the nakedness. This happened on Greensboro Vet Center and looked like:

Screenshot 2024-05-15 at 11 39 47 AM

Both Eli and Josh reviewed. We originally thought that we would want to update these to use a grid layout. However, Josh added a new class to handled this - see original comment. This has already been done to VAMCs on prod and can be seen here.

We would like to add the spotlight-card class to the card components on both Vet centers and VBA spotlights.

Acceptance Criteria

aklausmeier commented 5 months ago

I have also inquired about naked link error validation in Drupal in Slack.

eselkin commented 5 months ago

This happens on non-naked-links too here, like email addresses (separated not with spaces but   from that preferred)

Screenshot 2024-05-15 at 6 18 46 PM

eselkin commented 5 months ago

Actually found the style="word-break: break-word;" does wrap the naked links. So we don't need to switch to the grid. We can keep the flex.

aklausmeier commented 5 months ago

@eselkin Does the wrap solution keep the 3 columns to equal widths?

jtmst commented 5 months ago

by adding the following class we will be able to maintain equal width and appropriately wrap long links:

.spotlight-card { min-width: 30%; word-wrap: break-word; }

I'll be adding this as part of the health-services PR component migration PR, we will just need to add the class to other instances of the cards if @eselkin agrees that this works

davidmpickett commented 5 months ago

Verified on Prod for Vet Center Screenshot 2024-05-28 at 6 03 33 PM

Verified on Preview for VBA Screenshot 2024-05-28 at 6 05 41 PM