fix: improve full name editable fields in Person Show page (#1390)

* fix: improve full name editable fields in Person Show page

+ autoresize inputs according to their content
+ use "Empty" as placeholder
+ improve hover style

Closes #910

* refactor: code review

- rename TemplateDimensionsEffect to ComputeNodeDimensionsEffect

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -48,8 +48,8 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldRecoilScopeContext}>
       <DoubleTextInputEdit
-        firstValuePlaceholder={'F​irst n​ame'} // Hack: Fake character to prevent password-manager from filling the field
+        firstValuePlaceholder="Empty"
-        secondValuePlaceholder={'L​ast n​ame'} // Hack: Fake character to prevent password-manager from filling the field
+        secondValuePlaceholder="Empty"
         firstValue={internalValueFirstName ?? ''}
         secondValue={internalValueLastName ?? ''}
         onChange={handleChange}

front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
+import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
 
 export type DoubleTextInputEditProps = {
   firstValue: string;
@@ -18,10 +19,17 @@ const StyledDoubleTextContainer = styled.div`
   text-align: center;
 `;
 
-const StyledNameInput = styled(StyledInput)`
+const StyledTextInput = styled(StyledInput)`
+  margin: 0 ${({ theme }) => theme.spacing(0.5)};
   padding: 0;
-  text-align: center;
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
-  width: auto;
+
+  &:hover:not(:focus) {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    cursor: pointer;
+    padding: 0 ${({ theme }) => theme.spacing(1)};
+  }
 `;
 
 export function DoubleTextInputEdit({
@@ -33,24 +41,32 @@ export function DoubleTextInputEdit({
 }: DoubleTextInputEditProps) {
   return (
     <StyledDoubleTextContainer>
-      <StyledNameInput
+      <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
-        size={firstValue.length}
+        {(nodeDimensions) => (
-        autoFocus
+          <StyledTextInput
-        placeholder={firstValuePlaceholder}
+            width={nodeDimensions?.width}
-        value={firstValue}
+            autoFocus
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            placeholder={firstValuePlaceholder}
-          onChange(event.target.value, secondValue);
+            value={firstValue}
-        }}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-      />
+              onChange(event.target.value, secondValue);
-      <StyledNameInput
+            }}
-        size={secondValue.length}
+          />
-        autoComplete="off"
+        )}
-        placeholder={secondValuePlaceholder}
+      </ComputeNodeDimensionsEffect>
-        value={secondValue}
+      <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        {(nodeDimensions) => (
-          onChange(firstValue, event.target.value);
+          <StyledTextInput
-        }}
+            width={nodeDimensions?.width}
-      />
+            autoComplete="off"
+            placeholder={secondValuePlaceholder}
+            value={secondValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(firstValue, event.target.value);
+            }}
+          />
+        )}
+      </ComputeNodeDimensionsEffect>
     </StyledDoubleTextContainer>
   );
 }

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+type ComputeNodeDimensionsEffectProps = {
+  children: (
+    dimensions: { height: number; width: number } | undefined,
+  ) => ReactNode;
+  node?: ReactNode;
+};
+
+const StyledNodeWrapper = styled.span`
+  pointer-events: none;
+  position: fixed;
+  visibility: hidden;
+`;
+
+export const ComputeNodeDimensionsEffect = ({
+  children,
+  node = children(undefined),
+}: ComputeNodeDimensionsEffectProps) => {
+  const nodeWrapperRef = useRef<HTMLSpanElement>(null);
+  const [nodeDimensions, setNodeDimensions] = useState<
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined
+  >(undefined);
+
+  useEffect(() => {
+    nodeWrapperRef.current &&
+      setNodeDimensions({
+        width: nodeWrapperRef.current.offsetWidth,
+        height: nodeWrapperRef.current.offsetHeight,
+      });
+  }, [node]);
+
+  return (
+    <>
+      <StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
+      {children(nodeDimensions)}
+    </>
+  );
+};