fix(overlays): stop dialogs animating in from the top-left corner - #1
Merged
Merged
Conversation
`transform` and `translate` are separate CSS properties that compose: the browser applies `translate` first and `transform` after. The dialog and command palette are centred with Tailwind's translate utilities, which in v4 compile to the standalone `translate` property, but the entry/exit rules repeated the same -50% inside `transform`. The centring was therefore applied twice for the length of the transition, so a dialog started roughly half its own size up and to the left of where it belonged and slid down-right into place. Leave only the entry offset and scale in `transform`. The `toast-in` keyframe carried the same duplicated -50% on X; it is unused inside the package but is exported for consumers, so it is fixed the same way. Claude-Session: https://claude.ai/code/session_01911q7fpiGHjD2mYpf3r3QJ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Dialogs, confirm prompts and the command palette animated in from the top-left corner instead of scaling gently into place.
transformandtranslateare two separate CSS properties, and the browser composes them:translateis applied first,transformafter. These popups are centred with Tailwind's-translate-x-1/2 -translate-y-1/2utilities, which in Tailwind v4 compile to the standalonetranslateproperty. The entry/exit rules instyles/overlays.cssrepeated that same-50%insidetransform, so the centring was applied twice for the length of the transition. On a 1200px viewport the dialog started 192px left and 105px above its final position and slid down-right into place.The fix leaves only the entry offset and the scale in
transform, and lets the Tailwind utilities own the centring.Changes
.ui-popupstarting/ending style is nowtranslateY(4px) scale(0.98), down fromtranslate(-50%, calc(-50% + 4px)) scale(0.98). This coversDialogandConfirmDialog..ui-palettestarting/ending style is nowtranslateY(-4px) scale(0.98), down fromtranslate(-50%, -4px) scale(0.98). This coversCommandPalette.toast-inkeyframe instyles/animations.csscarried the same duplicated-50%on X. No component in this package uses it, but it is exported for consumers, so it is fixed the same way.translateandtransformcompose, so the-50%does not get added back.No component or TypeScript changes. All 35 unit tests pass.
https://claude.ai/code/session_01911q7fpiGHjD2mYpf3r3QJ