Compare commits

...
Author SHA1 Message Date
Sonarly Claude Code 2ddeb48c99 fix(twenty-ui): guard Modal layout animation against Safari WAAPI TypeError
https://sonarly.com/issue/34960?type=bug

Framer-motion's `layout` prop on the auth Modal triggers a Web Animations API call (`Element.animate()`) during route transitions that throws a TypeError in Safari 26.4, crashing the `/plan-required` page and blocking users from completing billing onboarding.

Fix: Changed the framer-motion `layout` prop on `AnimatedModalDiv` from `layout` (true) to `layout="position"` in `packages/twenty-ui/src/layout/modal/components/Modal.tsx`.

**Why this fixes the bug:**
- `layout` (boolean true) tells framer-motion to animate BOTH position AND size changes using the Web Animations API (WAAPI) via `Element.animate()`
- When the auth modal content changes (e.g., from empty verify fragment to the ChooseYourPlan component), framer-motion detects the size change and calls `Element.animate()` with width/height keyframes
- Safari 26.4 throws a TypeError from the native `animate()` implementation when processing these layout keyframes during the `initPlayback` phase
- `layout="position"` restricts layout animations to position-only changes, avoiding the problematic WAAPI size animation call

**Why this is safe:**
- The modal's size is driven entirely by CSS (styled-component props for width, height, padding based on the `size` prop)
- The opacity fade animation (via `variants={modalAnimation}`) is unaffected
- Position animations still work for cases where the modal needs to reposition (e.g., centering adjustments)
- The `min-height: 320px` added in commit de1e592cd3 already prevents visual jumpiness during content transitions
2026-05-05 17:31:53 +00:00
@@ -154,7 +154,7 @@ export const Modal = ({
initial="hidden"
animate="visible"
exit="exit"
layout
layout="position"
overlay={overlay}
variants={modalAnimation}
transition={{