Use max-width instead of width for tag name #219
Conversation
Use max width for tag name see: #217 (comment)
SimonLab
added
the
awaiting-review
| @@ -13,7 +13,7 @@ | |||
| <.td> | |||
| <span | |||
| style={"background-color:#{tag.color}"} | |||
| class="w-40 text-white font-bold py-1 px-2 rounded-full | |||
| class="max-w-[144px] text-white font-bold py-1 px-2 rounded-full | |||
There was a problem hiding this comment.
Hmm… why 144px? Is this tested on any mobile devices? 📱
There was a problem hiding this comment.
yes tested on mobile.
I've take the value to match the m-36 (m-40 was a bit too long I think)
There was a problem hiding this comment.
OK. so you had to hard-code it because max-w-xs is 320px 💭
There was a problem hiding this comment.
So yes, I started tested with max-w-xs, it was looking ok on desktop:
However when I tested on mobile, the table wasn't displayed in full:
I knew with my previous PR(#218) that using the fixed width w-40 the display of the table was working on both desktop and mobile.
However Tailwind doesn't provide the max-w-40. I found the arbitrary value section in the documentation and decided to use then the max-w-[160px] first to match the w-40. However I still find the table/tag pills a bit too long and went with max-w-[144px] to match the w-36
Test describe in the comment #217 (comment) while I was doing the work on the PR
There was a problem hiding this comment.
Cool. Thanks for sharing more detail. 👌
Use max width for tag name
see: #217 (comment)