From 4866c73e79f93ffd310c4d59c2384f29f9ccad8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Sat, 8 Jul 2023 08:39:53 +0200
Subject: [PATCH] Improve display and fix missing key issue

---
 .../components/CommentThreadEditMode.tsx      |  2 +-
 .../modules/comments/components/Timeline.tsx  | 25 ++++++++++---------
 front/src/modules/ui/layout/Panel.tsx         |  1 -
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/front/src/modules/comments/components/CommentThreadEditMode.tsx b/front/src/modules/comments/components/CommentThreadEditMode.tsx
index 2cd3d7a15c2..1c21222759e 100644
--- a/front/src/modules/comments/components/CommentThreadEditMode.tsx
+++ b/front/src/modules/comments/components/CommentThreadEditMode.tsx
@@ -88,7 +88,7 @@ export function CommentThreadEditMode({
     theme: useTheme().name === 'light' ? 'light' : 'dark',
     initialContent: undefined,
     onEditorContentChange: (editor) => {
-      // Todo: save operation here
+      // TODO: save operation here
       console.log('save');
     },
     onEditorReady: (editor) => {
diff --git a/front/src/modules/comments/components/Timeline.tsx b/front/src/modules/comments/components/Timeline.tsx
index 21279b1a602..fd3281a512a 100644
--- a/front/src/modules/comments/components/Timeline.tsx
+++ b/front/src/modules/comments/components/Timeline.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
@@ -199,6 +200,16 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
 
   return (
     <StyledTimelineContainer>
+      <StyledTopActionBar>
+        <StyledTimelineItemContainer>
+          <StyledIconContainer>
+            <IconPlus />
+          </StyledIconContainer>
+
+          <TableActionBarButtonCreateCommentThreadCompany />
+        </StyledTimelineItemContainer>
+      </StyledTopActionBar>
+
       {commentThreads.map((commentThread) => {
         const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
           commentThread.createdAt,
@@ -208,17 +219,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
         console.log(JSON.parse(commentThread.body ?? '')[0].content[0].text);
 
         return (
-          <>
-            <StyledTopActionBar>
-              <StyledTimelineItemContainer>
-                <StyledIconContainer>
-                  <IconPlus />
-                </StyledIconContainer>
-
-                <TableActionBarButtonCreateCommentThreadCompany />
-              </StyledTimelineItemContainer>
-            </StyledTopActionBar>
-
+          <React.Fragment key={commentThread.id}>
             <StyledTimelineItemContainer>
               <StyledIconContainer>
                 <IconNotes />
@@ -255,7 +256,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
                 </StyledCard>
               </StyledCardContainer>
             </StyledTimelineItemContainer>
-          </>
+          </React.Fragment>
         );
       })}
     </StyledTimelineContainer>
diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx
index 27947b09ca9..a7793e0d1e6 100644
--- a/front/src/modules/ui/layout/Panel.tsx
+++ b/front/src/modules/ui/layout/Panel.tsx
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 const StyledPanel = styled.div`
   background: ${({ theme }) => theme.background.primary};
   border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
   display: flex;
   flex-direction: row;
   width: 100%;