More Interesting with Word Wrap - Bug Hunt


banner.gif

I rarely open Busy.org in my Laptop at home since I'm much more adapted to Steemit.com and its Night Mode now. I do use Busy.org in the office since it's accessible there, I use v1 only, v2 is still blocked by our servers. I just opened v2 now at home and I noticed that people having long names could cause something to be misaligned. Just look here:

image.png

Our good friend Terry aka @surpassinggoogle has been surpassing a lot of things including text areas, pushing the limits and shouts no - he's not 'Following' the rules, cause he has his own, better rules - in a very good way. Shoutout!

Ideally, word wrapping should be applied. I guess it's okay to cut off names in the middle and just add ellipsis after it. It should look more like this:

image.png

It looks much better right? Let's study this bug further and help resolve it. I made these mock-ups to help us see better with larger images.

Our first image shows the misalignment caused by some people who has longer names than usual:

1.png

As you can see, it pushes some of the elements out of their proper places. I added some guidelines here so that you can see what I mean:

2.png

Let's try moving the "Following" buttons to their proper places here:

3.png

Then let's check what's the proper margin for the text in this area is:

4.png

Then let's fix it by applying word wrap to the text area, cutting off the name and adding ellipses after it. We can also just cut off the names and not add ellipses, but in my opinion it's better to add ellipses after to signal that the name isn't complete at all.

5.png

It's still not done though - we have some alignment issues with the icons used. I looked for the center of the icon and made sure it's aligned with the other elements (user avatars) in its column (I replaced the icon with another one since I can't find anything more similar for presentation purposes):

6.png

There you have it. Alignment and Margins have been fixed:

7.png

Disclaimer: Codes are needed and we do not know if it is doable. However if someone can code this then I'm sure @busy.org will make their site in its best shape!



Open Source Contribution posted via Utopian.io