Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  softFocus?: boolean;
+  onClick?: () => void;
+};
+
+export const EditableCellDisplayModeOuterContainer = styled.div<
+  Pick<Props, 'softFocus'>
+>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+
+  ${(props) =>
+    props.softFocus
+      ? `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};`
+      : ''}
+`;
+
+export const EditableCellDisplayModeInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export function EditableCellDisplayContainer({
+  children,
+  softFocus,
+  onClick,
+}: React.PropsWithChildren<Props>) {
+  return (
+    <EditableCellDisplayModeOuterContainer
+      onClick={onClick}
+      softFocus={softFocus}
+    >
+      <EditableCellDisplayModeInnerContainer>
+        {children}
+      </EditableCellDisplayModeInnerContainer>
+    </EditableCellDisplayModeOuterContainer>
+  );
+}