ER: Fix credits text alignment

[JessicaLucindaCheng]

Dependency

• If removing or adding a field to a credit on the Credits page and there are alignment issues caused by the credit's text recentering vertically

Emergent Requirement - Problem

On the Credits page, we may want to remove the Provider field from some credits for composite images but removing a field may cause some alignment issues.

To test what it would look like if there was no Provider field for some of the credits, I temporarily removed the Provider field from the following credits:

• Avatar
• Book
• Building
• Button
• Candidates
• Employees
• Environmental Impact

The result was it recenters the text vertically and doesn't look good because, in desktop view, the tops of each credit's text are not aligned with each other (i.e. Agile and Avatar credits; Calendar Time and Candidates).

Click here to see a screenshot marked up with red horizontal lines showing how the tops of the texts for Agile and Avatar credits and the tops of the texts for Calendar Time and Candidates are not aligned.

For reference, here are full-page screenshots of the Provider field removed from some of the credits:

Click to see desktop view

Click to see mobile view

Issue you discovered this emergent requirement in

• This comment: Recreate an image for our homepage #4607 (comment)

Date discovered

May 9, 2023

Did you have to do something temporarily

• YES
• NO

Who was involved

@JessicaLucindaCheng
@ExperimentsInHonesty

What happens if this is not addressed

If the Provider field is removed, the credits text is recentered vertically and doesn't look good.

Resources

• Credits page
• _sass/components/_credit-items.scss

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

Align each credit's text so it starts at the top of its flex container for each credit, add align-self: flex-start; to the .icon-info class in _sass/components/_credit-items.scss.

• Note: This does not align the text with the top of the images because the images are centered vertically and the images are different heights (i.e. Citizen Engagement credit image).

Here are screenshots of what adding align-self: flex-start; to the .icon-info class would look like

Click here to see desktop view

Click here to see mobile view