Tag name length distorts responsive design on mobile

[Eiernase]

Description

Long tag names on mobile cause the start button and tag icon to be squished and the time to be misaligned.
On Chrome, the word wrap doesn't work for phrases/with/slashes and causes overflow.
Additionally, the justification of the start and end times is a fixed distance to the "billable" button, which in turn has a fixed distance from the tag name, but has a max-right value (this causes the overflow mentioned earlier). So, depending on the length of the tag name, both are misaligned.

Sometimes the start button is misaligned as well, but I don't know why this happens yet.

Squish in Firefox:

Squish and Overflow Chrome:

Billing and Time Misalignment:

Start Button Misalignment:

Steps To Reproduce

1. Use solidtime on mobile
2. Add tags with different name lengths and spaces to entries
3. Profit
   ...

Self-hosted or Cloud?

None

Version of solidtime: (for self-hosted)

0.9.0

solidtime self-hosting guide: (for self-hosted)

docker compose with database

[diegohh0411]

Hi! @Onatcer

I'm Diego, a Computer Science college student that loves open source projects and just migrated to SolidTime from Toggl. This project is awesome! Also, I love that y'all use cutting edge technology like TanStack and Vue.

I've been wanting to start contributing to the open source community, and I thought this would be a good issue to start with. It's a product I use and like to use, it's technology I've worked with and it's a fairly simple bug. I see that you've assigned yourself to this bug, but if you haven't started working on, do you think I could give it a go? If not, is there some other issue you think would be a good first contribution?