From ed86cec1e823a89526f1522ad99a35637421608e Mon Sep 17 00:00:00 2001
From: David Kramer <74869455+Davidkramer1999@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:02:54 +0200
Subject: [PATCH] Fix design EditableCell 'Hover', 'Focus' and 'Edit Mode'
 #1663 (#1740)

* fixed styling  EditableCell

* adding same solution

* removing shadow to cover top and bottom

* fixing with outline

* fixing width

---------

Co-authored-by: kramer <david.kramer@gmail.com>
---
 .../table/editable-cell/components/TableCellContainer.tsx   | 1 -
 .../editable-cell/components/TableCellDisplayContainer.tsx  | 6 ++----
 .../ui/table/editable-cell/components/TableCellEditMode.tsx | 5 +----
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/front/src/modules/ui/table/editable-cell/components/TableCellContainer.tsx b/front/src/modules/ui/table/editable-cell/components/TableCellContainer.tsx
index ca923ca25..2a746ab09 100644
--- a/front/src/modules/ui/table/editable-cell/components/TableCellContainer.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/TableCellContainer.tsx
@@ -24,7 +24,6 @@ const StyledCellBaseContainer = styled.div`
   height: 32px;
   position: relative;
   user-select: none;
-  width: 100%;
 `;
 
 export type EditableCellProps = {
diff --git a/front/src/modules/ui/table/editable-cell/components/TableCellDisplayContainer.tsx b/front/src/modules/ui/table/editable-cell/components/TableCellDisplayContainer.tsx
index 1e027a149..be1c5b66e 100644
--- a/front/src/modules/ui/table/editable-cell/components/TableCellDisplayContainer.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/TableCellDisplayContainer.tsx
@@ -15,16 +15,14 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
   display: flex;
   height: 100%;
   overflow: hidden;
-
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
-
   ${(props) =>
     props.softFocus || props.isHovered
       ? `background: ${props.theme.background.transparent.secondary};
-        border-radius: ${props.theme.border.radius.sm};
-        box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
+      border-radius: ${props.theme.border.radius.sm};
+      outline: 1px solid ${props.theme.font.color.extraLight};`
       : ''}
 `;
 
diff --git a/front/src/modules/ui/table/editable-cell/components/TableCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/components/TableCellEditMode.tsx
index c9a0126d6..4fae82c89 100644
--- a/front/src/modules/ui/table/editable-cell/components/TableCellEditMode.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/TableCellEditMode.tsx
@@ -12,14 +12,11 @@ const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps
   display: flex;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
-  margin-left: -1px;
-  margin-top: -1px;
-
+  margin: -1px;
   max-width: ${({ maxContentWidth }) =>
     maxContentWidth ? `${maxContentWidth}px` : 'none'};
   min-height: 100%;
   min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
-
   position: absolute;
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};