ER: Fix credits text alignment
- Dominant language
- JavaScript
- Stars
- 363
- Forks
- 872
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 18
Description
### 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: https://github.com/hackforla/website/issues/4607#issuecomment-1541143884
### Date discovered
May 9, 2023
### Did you have to do something temporarily
- [ ] YES
- [x] 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](https://www.hackforla.org/credits/) page
- [_sass/components/_credit-items.scss](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_credit-items.scss)
### Recommended Action Items
- [x] Make a new issue
- [x] 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](https://github.com/hackforla/website/blob/gh-pages/_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

Contributor guide
Assessment
This issue has not been assessed yet.