Top district text overflow
Created by: balrajsingh9
Describe the bug The top district text in the state details overflows/overlaps with the next district text right below it when the text has more than 3 words. And it looks confusing and is attached to the next district text when the length of the text is 3.
To Reproduce
- Click on Meghalaya (I'm sure valid for other states as well, but observed here) in the table.
- Then click on See more details on ML.
- Scroll down to Top Districts
Expected behavior The text should be clearly visible with no overflow or overlaps and should have an appropriate margin between two district names.
Screenshots
- When
length > 3
- When
length == 3
(Edited in dev tools for an example)
Desktop:
- OS: macOS Catalina
- Browser: Chrome Canary
- Version: 86
Mobile:
- OS: Android 10
- Browser: Chrome
- Version: 83
Additional context
The problem seems to be the flex: 0 1
property on the h5
el. If we remove it, it renders just fine (see below screenshot).