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>

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 = {

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};`
       : ''}
 `;
 

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'};