Adapt styling to fix broken truncation

[stffffn]

The truncation wasn't working which lead to a broken layout on mobile devices.
I adapted the styling to fix the broken truncation and also introduced some minor improvements for the mobile view without changing your initial styling too much:

• Using gaps instead of the space-y utility class: Adds a gap between the avatar and the name/handle & removes the one-sided margin on the left
• Uniform padding on the sides
• Actually centering avatar and follow button

Mobile view example:

Before	After

Another mobile view example:

Before	After

Desktop view is visually unchanged:

Before	After

(Currently also includes formatting changes - see https://github.com/gabipurcaru/followgraph/pull/11)

[gabipurcaru]

Hey @stffffn, thanks for the PR. Yes, I see the problem here. I'm not entirely sure that truncating the text is the way to go though, since the information in there should be visible. A better solution would be to split the ${handle} | ${num} followers in two lines on narrow width screens.

Can you change the PR to do that? Thanks!

[stffffn]

Hey @stffffn, thanks for the PR. Yes, I see the problem here. I'm not entirely sure that truncating the text is the way to go though, since the information in there should be visible. A better solution would be to split the ${handle} | ${num} followers in two lines on narrow width screens.

Can you change the PR to do that? Thanks!

Sure, will do 👍
I actually thought the same but didn't want to introduce such changes unsolicited and just wanted to make the originally implemented behavior work.

[stffffn]

I have kept the truncate utility class just for the handle to deal with very long edge cases, since I don't think that using word breaks would be a good solution.

New:

Fictional edge case:

Visually still unchanged by the changes: