undp / design-system

UNDP Design System
https://design.undp.org
MIT License
23 stars 13 forks source link

(fix) issue #1375 -- header size dynamically adjusted #1380

Open Radu-Nicolae opened 2 weeks ago

Radu-Nicolae commented 2 weeks ago

🚀 (fix) issue #1375 -- header size dynamically adjusted

Issue

"The size of the header is computed with a mathematical function and passed further to react. This way the header does not wrap around for single words that are long. However, it still wraps around for phrases."

Solution

With this PR, the size of the header is computed with a mathematical function and passed further to react. This way, the header does not wrap around for long single words; the functionality of text wrapping around for phrases is still maintained.

See appendix below.

Type of Change

This activity is supported by the Network Institute, Vrije Universiteit Amsterdam, under the Code for Humanity initiative.

Appendix

Initially

Screenshot 2024-09-17 at 7 48 22 PM

Text from template

Screenshot 2024-09-17 at 8 32 32 PM

4 letter word (<5 threshold)

Screenshot 2024-09-17 at 8 32 52 PM

>=5 letter-threshold

Screenshot 2024-09-17 at 8 32 59 PM

14 letter word (3% of the English words have >=letters, 0.02% have >=14 letters)

Screenshot 2024-09-17 at 8 33 10 PM

A bit towards extreme

Screenshot 2024-09-17 at 8 33 20 PM

"ABCDE FGHIJKLM NOPQRSTU" (3 longer words)

Screenshot 2024-09-17 at 8 33 34 PM