bug: alignment issue with otp component

[pdanpdan]

Reproduction URL (Required)

https://daisyui.com/components/otp/#otp-joined

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

No response

Describe your issue

At least for me (chrome linux wayland) there is a difference between how the :after is rendered in docs and in play: in play all looks good while in docs the outline for joined otp is 2px to the left (the 2px from translate).

Docs: https://daisyui.com/components/otp/#otp-joined
Play: https://play.tailwindcss.com/eoG4qc2A7F?file=css

Also when the whole joined otp is filled the right (end) is clipped (it looks ok if the clip is uniform -3.5px) - this one is clear

https://play.tailwindcss.com/JHwbHID5n4?file=css looks good in codepen even without the translate, so I think it only shows when in a non-static positioning situation.
The 2 changes are maked with HERE, but it's not tested on safari which was the reason some of the styles were applied.

[github-actions]

Thank you @pdanpdan for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Can you add a screenshot of the issue please?

[pdanpdan]

Docs:

Play (published code):

[pdanpdan]

Docs firefox:

Play firefox:

[saadeghi]

Yes that translate was an extra.
I did some adjustments, also for Firefox. Can you check if this is better or not?

updated: https://play.tailwindcss.com/RPcJPh7v4m?file=css

[pdanpdan]

It looks good to me, both on local docs and in play.
What I cannot figure is why on local docs and in play the current published version look good but in online docs it does not.
I'll do some diggings on the fonts, maybe I can discover the reason.

[pdanpdan]

I solved the mistery :(
translate: -2 0; was missing the measurement unit.
When running bun run dev or in play the rule was just ignored as invalid.
When doing the build the value was auto corrected (probably by lightningcss) and applied as translate: -2px 0

[pdanpdan]

On chrome and firefox it looks great. Please check the ugly sister :)

[saadeghi]

Tested on Safari as well ✅