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/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)}
+    </>
+  );
+};