[HS-1063275] Fix long opportunity names

[canac]

Fix long opportunity names displaying under the thumbnail image by switching from floating to flexbox.

Before:

After:

https://secure.helpscout.net/conversation/2443333491/1063275?folderId=7296729

[j2trumpet]

@canac Can I see this in action somewhere? I want to check the responsiveness.

[canac]

@j2trumpet https://give-stage2.cru.org/search-results.html?type=featured You'll have to manually change the text of the "Testing UAT Campaign Page Population" element in DevTools so that it's longer.

Here's the production page too: https://give.cru.org/search-results.html?type=featured

[wrandall22]

Seems like we should push back on them creating such long names in the first place.

[j2trumpet]

I would get rid of the margin-right: $gutter*.5; on line 291, add align-items: center and column-gap: $gutter*.5 to .is-row, and remove the "clearfix" class from the HTML output on every .is-row.

[j2trumpet]

@canac My suggested changes will vertically center the three pieces of content with each other and add space between the text and the buttons. We could have just added margin like the image had, but that's not the flex way to do it.

[j2trumpet]

Staging looks good to me!

[dr-bizz]

Looks great. Should we go live with this in the code freeze, or wait until Jan?

[canac]

@dr-bizz I'm going to assume after January. If they have issues in the meantime, they can shorten their campaign titles as a workaround.