From f72c3d73bf00fd5b1974e2f753a6dfaf4d10535b Mon Sep 17 00:00:00 2001
From: Kailash Rajput <98249911+Kailash8799@users.noreply.github.com>
Date: Wed, 20 Aug 2025 21:37:39 +0530
Subject: [PATCH] fix: fix position of checkbox and icon (#13999)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Minor UI Fix

Checkbox and icon are not center horizontally which look little odd so
make them horizonatally center

Before
<img width="396" height="57" alt="Screenshot 2025-08-20 at 8 48 23 PM"
src="https://github.com/user-attachments/assets/1505b2e6-6b39-498b-a1be-93d11ca89494"
/>

After
<img width="392" height="56" alt="image"
src="https://github.com/user-attachments/assets/ffa68625-8014-4e58-9211-3e9b822dfa35"
/>
---
 .../object-form/components/OverridableCheckbox.tsx    |  2 +-
 .../utilities/animation/components/AnimatedRotate.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
index 1b76ce17983..c603ecfbc25 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
@@ -82,7 +82,7 @@ export const OverridableCheckbox = ({
               onClick={disabled ? undefined : onChange}
               isDisabled={disabled}
             >
-              <AnimatedRotate animateOnHover>
+              <AnimatedRotate animateOnHover={!disabled}>
                 <IconReload
                   size={theme.icon.size.md}
                   color={theme.adaptiveColors.orange4}
diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx
index aaa3fb8c429..98760f0f27b 100644
--- a/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx
+++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import { type AnimationDuration } from '@ui/theme';
 import { type HTMLMotionProps, motion } from 'framer-motion';
 
@@ -10,6 +11,12 @@ type AnimatedRotateProps = Omit<
   animateOnHover?: boolean;
 };
 
+const StyledMotionDiv = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
 export const AnimatedRotate = ({
   children,
   duration = 'fast',
@@ -24,7 +31,7 @@ export const AnimatedRotate = ({
   };
 
   return (
-    <motion.div
+    <StyledMotionDiv
       initial={initial}
       animate={animate}
       transition={transition}
@@ -41,6 +48,6 @@ export const AnimatedRotate = ({
       }
     >
       {children}
-    </motion.div>
+    </StyledMotionDiv>
   );
 };