Make phone editable on people's page (#98)

* Make phone editable on people's page

* Make City editable

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/components/table/editable-cell/EditableCellWrapper.tsx

@@ -7,6 +7,7 @@ import { ThemeType } from '../../../layout/styles/themes';
 type OwnProps = {
   children: ReactElement;
   onEditModeChange: (isEditMode: boolean) => void;
+  shouldAlignRight?: boolean;
 };
 
 const StyledWrapper = styled.div`
@@ -20,19 +21,24 @@ const StyledWrapper = styled.div`
 
 type styledEditModeWrapperProps = {
   isEditMode: boolean;
+  shouldAlignRight?: boolean;
 };
 
-const styledEditModeWrapper = (theme: ThemeType) =>
+const styledEditModeWrapper = (
+  props: styledEditModeWrapperProps & { theme: ThemeType },
+) =>
   css`
     position: absolute;
+    left: ${props.shouldAlignRight ? 'auto' : '0'};
+    right: ${props.shouldAlignRight ? '0' : 'auto'};
     width: 260px;
     height: 100%;
 
     display: flex;
-    padding-left: ${theme.spacing(2)};
-    padding-right: ${theme.spacing(2)};
-    background: ${theme.primaryBackground};
-    border: 1px solid ${theme.primaryBorder};
+    padding-left: ${props.theme.spacing(2)};
+    padding-right: ${props.theme.spacing(2)};
+    background: ${props.theme.primaryBackground};
+    border: 1px solid ${props.theme.primaryBorder};
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
     z-index: 1;
     border-radius: 4px;
@@ -43,10 +49,14 @@ const Container = styled.div<styledEditModeWrapperProps>`
   width: 100%;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
-  ${(props) => props.isEditMode && styledEditModeWrapper(props.theme)}
+  ${(props) => props.isEditMode && styledEditModeWrapper(props)}
 `;
 
-function EditableCellWrapper({ children, onEditModeChange }: OwnProps) {
+function EditableCellWrapper({
+  children,
+  onEditModeChange,
+  shouldAlignRight,
+}: OwnProps) {
   const [isEditMode, setIsEditMode] = useState(false);
 
   const wrapperRef = useRef(null);
@@ -63,7 +73,9 @@ function EditableCellWrapper({ children, onEditModeChange }: OwnProps) {
         onEditModeChange(true);
       }}
     >
-      <Container isEditMode={isEditMode}>{children}</Container>
+      <Container shouldAlignRight={shouldAlignRight} isEditMode={isEditMode}>
+        {children}
+      </Container>
     </StyledWrapper>
   );
 }