Fix accessibility issue for plans cards
What does this MR do and why?
Fix the accessibility issue when the text overlaps significantly on the billing page. Happens when user sets their font size in Chrome to large and the user is on a free plan.
Related to #375757 (closed)
Screenshots or screen recordings
| Before | After |
|---|---|
Mobile medium font 
|
Mobile medium font 
|
Mobile large font 
|
Mobile large font 
|
Desktop medium font 
|
Desktop medium font 
|
Desktop large font 
|
Desktop large font 
|
How to set up and validate locally
- Create or take existent group on free tier
- Open the billing page
http://localhost:3000/groups/<your-group>/-/billings - Reset font, for Chrome browser you could do it on chrome://settings/appearance
- Resize the page
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.