Very long tag name break table

[SimonLab]

These are tags created on fly.io when not loggedin Add a max-width and overflow settings on the tag name (using ellipsis could maybe work?)

[SimonLab]

The issue is that the tag text is one word without spaces so it overflow the table width see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

We can see that if we create a long tag name with multiple spaces the tag doesn't overflow:

[SimonLab]

resolved by adding the following classes to the span containing the tag name: overflow-hidden text-ellipsis whitespace-nowrap inline-block w-40

see also https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working

[SimonLab]

Not there yet:

The width is applied to all the tags, it work for long text however for smaller text we want the pill width to match the length of the content, tried to apply a max width instead but this doesn't work. I need to investigate a bit more how to fix this:

[SimonLab]

The max width are working, I wasn't using the correct tailwind class. However the default max-width are too long: https://tailwindcss.com/docs/max-width

Luckily Tailwind provides also a way to have a customised class:

Going for max-w-[144px]

[nelsonic]

@SimonLab glad you persisting with this UI quest. 🤞🏼 Please consider using a mobile simulator e.g. Firefox to try and appear mobile-first. 🙏📱

[SimonLab]

tested on mobile, see https://github.com/dwyl/mvp/pull/219#discussion_r1034893150

deployed and fly version fixed:

[nelsonic]

@SimonLab yes, "Tested on mobile" but screenshots still on desktop ... 🖥️ What I mean is: take the screenshot in Firefox with the viewport constrained to a Mobile View e.g: https://github.com/dwyl/dev-setup/issues/55

For a new person there are no default tags so when they attempt to add tags from the "home" view:

They need to manually go to the /tags page in order to Create Tag:

This is undesirable UX. We definitely don't want to force people to change contexts to create a tag. This is a "Why?" moment and should be avoided.

[SimonLab]

"Tested on mobile" but screenshots still on desktop ... desktop_computer:

We can see the pills length is based on the tag name, except when the name is too long, then ellipsis are added.

This is undesirable UX. We definitely don't want to force people to change contexts to create a tag.

I'll open another issue for this: https://github.com/dwyl/mvp/issues/221