From b1322beac31b178f6591f537974606e7b42a204b Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Thu, 13 Mar 2025 16:50:35 +0100
Subject: [PATCH] Fix console errors (#10859)

Fixes https://github.com/twentyhq/core-team-issues/issues/276

## Before

![image](https://github.com/user-attachments/assets/d1b49746-eb9b-4f96-81af-81332ebb2e43)

![image](https://github.com/user-attachments/assets/41ceccfc-6ee3-4ff5-9d02-c621244bf36b)


## After

![image](https://github.com/user-attachments/assets/67eea9c9-d838-4211-9e75-47d895d2662e)
---
 .../components/RecordDetailRelationRecordsListItem.tsx     | 2 +-
 .../object-record/record-table/components/RecordTable.tsx  | 2 +-
 .../record-table-row/components/RecordTableDraggableTr.tsx | 2 +-
 .../components/PageHeaderOpenCommandMenuButton.tsx         | 5 ++++-
 .../json-visualizer/components/internal/JsonArrow.tsx      | 2 +-
 .../menu-item/components/MenuItemCommandHotKeys.tsx        | 7 ++++---
 6 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
index 407e0e0d6..b1d124054 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@@ -83,7 +83,7 @@ const StyledClickableZone = styled.div`
   justify-content: flex-end;
 `;
 
-const MotionIconChevronDown = motion(IconChevronDown);
+const MotionIconChevronDown = motion.create(IconChevronDown);
 
 type RecordDetailRelationRecordsListItemProps = {
   isExpanded: boolean;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
index a0787d1ce..e7ad8f56a 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -28,7 +28,7 @@ const StyledTable = styled.table`
   table-layout: fixed;
   width: 100%;
 
-  .footer-sticky tr:nth-last-child(2) td {
+  .footer-sticky tr:nth-last-of-type(2) td {
     border-bottom-color: ${({ theme }) => theme.background.transparent};
   }
 `;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx
index d6622a357..e46e57d8c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx
@@ -15,7 +15,7 @@ type RecordTableDraggableTrProps = {
   children: ReactNode;
 };
 
-const StyledAbsoluteInViewContainer = styled.div`
+const StyledAbsoluteInViewContainer = styled.td`
   position: absolute;
   top: 0;
   left: 0;
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index bc3601aba..c1e74535c 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -43,6 +43,7 @@ const AnimatedIcon = ({
         cx={12}
         cy={12}
         r="1"
+        initial={{ opacity: 0 }}
         animate={{
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
@@ -55,7 +56,7 @@ const AnimatedIcon = ({
         <motion.path
           key={index}
           d={path}
-          initial={{ pathLength: 0 }}
+          initial={{ pathLength: 0, opacity: 0 }}
           animate={{
             pathLength: isCommandMenuOpened ? 1 : 0,
             opacity: isCommandMenuOpened ? 1 : 0,
@@ -73,6 +74,7 @@ const AnimatedIcon = ({
         cx="12"
         cy="5"
         r="1"
+        initial={{ opacity: 0 }}
         animate={{
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
@@ -85,6 +87,7 @@ const AnimatedIcon = ({
         cx="12"
         cy="19"
         r="1"
+        initial={{ opacity: 0 }}
         animate={{
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
diff --git a/packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx b/packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
index aa94225ed..60ddf0e13 100644
--- a/packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/json-visualizer/components/internal/JsonArrow.tsx
@@ -20,7 +20,7 @@ const StyledButton = styled(motion.button)`
   cursor: pointer;
 `;
 
-const MotionIconChevronDown = motion(IconChevronDown);
+const MotionIconChevronDown = motion.create(IconChevronDown);
 
 export const JsonArrow = ({
   isOpen,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
index 23e10d2e0..075fa5e1c 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledCommandTextContainer = styled.div`
@@ -47,10 +48,10 @@ export const MenuItemCommandHotKeys = ({
       {hotKeys && (
         <StyledCommandTextContainer>
           {hotKeys.map((hotKey, index) => (
-            <>
-              <StyledCommandKey key={index}>{hotKey}</StyledCommandKey>
+            <React.Fragment key={index}>
+              <StyledCommandKey>{hotKey}</StyledCommandKey>
               {index < hotKeys.length - 1 && joinLabel}
-            </>
+            </React.Fragment>
           ))}
         </StyledCommandTextContainer>
       )}