status component: Fix repeater name overflowing #383

yukijoou · 2024-04-01T15:04:26Z

yukijoou commented

2024-04-01 15:04:26 +00:00

If someone repeating a post had a long username, their username would overflow beyond the bounds of the post.

This fixes this isse by turning the bar displaying the username and repeat icon into a flexbox.

If someone repeating a post had a long username, their username would overflow beyond the bounds of the post. This fixes this isse by turning the bar displaying the username and repeat icon into a flexbox.

Oneric reviewed

2024-05-17 17:03:46 +00:00

Oneric left a comment

Hi, thanks for the fix.

I’m far from an expert in CSS, but it seems to work fine in testing. Though i have some – potentially silly – questions. Could you explain those parts in more detail?

Hi, thanks for the fix. I’m far from an expert in CSS, but it seems to work fine in testing. Though i have some – potentially silly – questions. Could you explain those parts in more detail?

src/components/status/status.scss Outdated

					
				@ -87,7 +87,6 @@

				  .status-username {

				    white-space: nowrap;

				    overflow: hidden;

				    max-width: 85%;

this removes max-width for usernames above all statuses regardless of whether it’s the author’s name or a repeater name, but only new restrictions for repeater names are added

Are you sure this doesn't introduce any new overflow issues? Which other rule already ensures this?

this removes `max-width` for usernames above _all_ statuses regardless of whether it’s the author’s name or a repeater name, but only new restrictions for repeater names are added Are you sure this doesn't introduce any new overflow issues? Which other rule already ensures this?

I'm honestly not sure why I removed this in the first place, I think this is a leftover from an earlier attempt at fixing the bug. Reverting this change doesn't seem to cause any issue, so I'll just do that to avoid introducing regressions!

yukijoou marked this conversation as resolved

src/components/status/status.vue Outdated

					
				@ -111,0 +110,4 @@

				          <div

				            class="repeat-text"

				          >

				            {{ $t('timeline.repeated') }}

This only includes the actual “repeated” text into the flex-shrink: 0; section. Testing the change shows the icon doesn’t get hidden regardless. Do you think it’d make sense to still include the icon into the flex-shrink: 0; section anyway to better communicate the desired output (not hiding the icon)?

This only includes the actual “repeated” _text_ into the `flex-shrink: 0;` section. Testing the change shows the icon doesn’t get hidden regardless. Do you think it’d make sense to still include the icon into the `flex-shrink: 0;` section anyway to better communicate the desired output (not hiding the icon)?