Closed laflannery closed 5 months ago
I have also inquired about naked link error validation in Drupal in Slack.
This happens on non-naked-links too here, like email addresses (separated not with spaces but
from that preferred)
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.
@eselkin Does the wrap solution keep the 3 columns to equal widths?
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
Verified on Prod for Vet Center
Verified on Preview for VBA
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:
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
spotlight-card
class has been added to Vet Center spotlights so that now they always display properly and have equal widths when there are 2 or 3 addedspotlight-card
class has been added to VBA spotlights always so that now they display properly and have equal widths when there are 2 or 3 added (here or separate ticket)