Closed stffffn closed 1 year ago
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!
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.
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.
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:
space-y
utility class: Adds a gap between the avatar and the name/handle & removes the one-sided margin on the leftMobile view example:
Another mobile view example:
Desktop view is visually unchanged:
(Currently also includes formatting changes - see https://github.com/gabipurcaru/followgraph/pull/11)