Create hook to auto-scale font size to fit into the parent container

[urbullet]

Created a hook that takes two refs (parent container & text container). And then checks if the text container is overlapping the parent, then some action is required (resizing). And it will resize the font until 6px, as it will be impossible to read after that. Instead, it informs the text container to break anywhere when there is a text overflow, while adding hyphens for more clarity of the word break.

I have tested it with the longest known name (according to google, it is "Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr."). And even Mr. Hubert can now see his name displayed properly on our profile page.

I have not added any tests for it, as TDD and css can get really messy; add hooks & refs into the blunder and you have a very hard test.

Closes #1730.

Web frontend checklist

• Formatted my code with yarn format && yarn lint --fix
• There are no warnings from yarn lint
• There are no console warnings when running the app
• Added any new components to storybook
• Added tests where relevant
• All tests pass
• Clicked around my changes running locally and it works
• Checked Desktop, Mobile and Tablet screen sizes

[darrenvong]

This seems a bit overkill to me. Can we not design this such that it flows over to multiple lines with only CSS?

I also have accessibility concerns over this solution - the fact this will keep shrink the user name to 6px just to fit a design is really bad for users with poor eyesight. Realistically, anything below 10px (i.e. the size of our current "caption text" in our theme) is just too small to be easily read, and undermines the fact the user name is meant to be an important text!

Also setting it against absolute pixel value will break things for user who set their default font size to something larger in the browser.

[lucaslcode]

This is a really cool hook, but I think word-break: break-word (god css wrapping is a mess) might do the trick?

[urbullet]

A simple word-break does the trick yes, I believe it has to be anywhere though not break-word. I think i misunderstood the requirements as I took it too literal maybe, because the ticket mentioned being able to scale down font size dynamically when it overflows. In that case I'll do the required changes and do another review request.

…

On Sun, Feb 6, 2022, 23:57 Lucas Levin ***@***.***> wrote: This is a really cool hook, but I think word-break: break-word (god css wrapping is a mess) might do the trick? — Reply to this email directly, view it on GitHub <#2509 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB3CD5AMJ7AUVRU7GOD3OQ3UZ4DGTANCNFSM5NV4EYSQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[lucaslcode]

just make sure to check caniuse.com - from memory the most "correct" option isn't supported on mobile ios or something (typical 🤣 )

[urbullet]

I've removed the created hook, and replaced it with simple CSS properties word-break: 'break-word'; overflow-wrap: 'break-word';.

This should do the trick, it is supported across all browsers.

[lucaslcode]

Thanks so much! Feel free to merge this

stale