Country page: unreadable body text on the dark card and a stacked See Other Countries list

Problem/Motivation

Two rendering defects on the country page.

The On the Ground text cannot be read. The card has a dark background and its heading is white, but the body text keeps the default dark body colour, so it is dark navy on dark navy.

See Other Countries stacks. The related countries block renders one full-width card per row instead of a row of cards, because that display uses the unformatted row style while the other displays of the same view use the grid style.

Steps to reproduce

1. Install the Horizon Aid site template.
2. Open a country, for example /countries/kenya.
3. Look at the On the Ground card: the paragraph is invisible against the background.
4. Scroll to See Other Countries: four cards, each on its own full-width row.

Proposed resolution

• Render the On the Ground body through the Text component, which carries a text colour, and set it to white so it matches the heading on the dark card. The Rich text component has no colour property, which is why the paragraph inherited the body colour.
• Give the related display of the countries view the same grid style the other displays use, so the cards form a row.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

User interface changes

• The On the Ground text is readable on the dark card.
• See Other Countries renders as a row of cards.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Fixed unreadable body text on the country page dark card and made See Other Countries render as a grid.