fix: dialog flashing in top-left corner before centering #156
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes a visual bug where the Dialog component briefly flashes in the top-left corner before animating to its centered position. The issue is visible on the documentation site at https://www.tremor.so/docs/ui/dialog.
The root cause was that the
dialogContentShowanimation keyframes included positioning transformstranslate(-50%, -50%)which conflicted with the Tailwind positioning classes already applied to the component (-translate-x-1/2 -translate-y-1/2). This caused a brief render frame where transforms were not correctly applied.The fix removes the positioning transforms from the animation, letting Tailwind handle the centering while the animation only handles opacity and scale effects.
Related issue(s)
Related to #152 - This fix addresses dialog positioning issues
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
How has this been tested?
Screenshots (if appropriate):
Before: Dialog flashes in top-left corner before centering
After: Dialog animates smoothly from center position with only opacity/scale changes
The PR fulfils these requirements:
mainbranch