Animate the opening and exiting states of the JSON visualizer (#10965)

I used `overflow-y: clip` instead of `overflow-y: hidden` because of
this behavior:

> Setting overflow to visible in one direction (i.e. overflow-x or
overflow-y) when it isn't set to visible or clip in the other direction
results in the visible value behaving as auto.


## Demo


https://github.com/user-attachments/assets/b7975c99-58cc-4b63-b420-a54b27752188

Closes https://github.com/twentyhq/core-team-issues/issues/562

packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { VisibilityHidden } from '@ui/accessibility';
 import { IconChevronDown } from '@ui/display';
 import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
+import { ANIMATION } from '@ui/theme';
 import { motion } from 'framer-motion';
 
 const StyledButton = styled(motion.button)`
@@ -45,7 +46,8 @@ export const JsonArrow = ({
         size={theme.icon.size.md}
         color={theme.font.color.secondary}
         initial={false}
-        animate={{ rotate: isOpen ? -180 : 0 }}
+        animate={{ rotate: isOpen ? 0 : -90 }}
+        transition={{ duration: ANIMATION.duration.normal }}
       />
     </StyledButton>
   );

packages/twenty-ui/src/json-visualizer/components/internal/JsonList.tsx

@@ -12,6 +12,10 @@ const StyledList = styled.ul<{ depth: number }>`
     depth > 0 &&
     css`
       padding-left: ${theme.spacing(8)};
+
+      > :first-of-type {
+        margin-top: ${theme.spacing(2)};
+      }
     `}
 `;