Fix autogrowing input glitch (#10224)

- Removed unnecessary resize observer
- Removed unused component
- Fixed autogrowing input glitch

# Before


https://github.com/user-attachments/assets/a7de71d5-bc6e-495f-851c-18df596749dd

# After


https://github.com/user-attachments/assets/63588d0e-1122-43fe-b685-3f3a4ec4114e

packages/twenty-ui/src/utilities/dimensions/components/AutogrowWrapper.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+type AutogrowWrapperProps = {
+  children: ReactNode;
+  node?: ReactNode;
+  className?: string;
+};
+
+const StyledNodeWrapper = styled.span`
+  pointer-events: none;
+  visibility: hidden;
+`;
+
+const StyledContainer = styled.div`
+  max-width: 100%;
+  position: relative;
+`;
+
+const StyledChildWrapper = styled.div`
+  left: 0;
+  top: 0;
+  position: absolute;
+  width: 100%;
+`;
+
+export const AutogrowWrapper = ({
+  children,
+  node = children,
+  className,
+}: AutogrowWrapperProps) => {
+  return (
+    <StyledContainer className={className}>
+      <StyledNodeWrapper>{node}</StyledNodeWrapper>
+      <StyledChildWrapper>{children}</StyledChildWrapper>
+    </StyledContainer>
+  );
+};

packages/twenty-ui/src/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -1,67 +0,0 @@
-import styled from '@emotion/styled';
-import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
-import { isDefined } from 'twenty-shared';
-
-type ComputeNodeDimensionsProps = {
-  children: (
-    dimensions: { height: number; width: number } | undefined,
-  ) => ReactNode;
-  node?: ReactNode;
-  className?: string;
-};
-
-const StyledNodeWrapper = styled.span`
-  pointer-events: none;
-  visibility: hidden;
-`;
-
-const StyledDiv = styled.div`
-  max-width: 100%;
-  position: relative;
-`;
-
-const StyledChildWrapper = styled.div`
-  left: 0;
-  position: absolute;
-  top: 0;
-`;
-
-export const ComputeNodeDimensions = ({
-  children,
-  node = children(undefined),
-  className,
-}: ComputeNodeDimensionsProps) => {
-  const nodeWrapperRef = useRef<HTMLDivElement>(null);
-  const [nodeDimensions, setNodeDimensions] = useState<
-    | {
-        width: number;
-        height: number;
-      }
-    | undefined
-  >(undefined);
-
-  useLayoutEffect(() => {
-    if (!nodeWrapperRef.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      if (isDefined(nodeWrapperRef.current)) {
-        setNodeDimensions({
-          width: nodeWrapperRef.current.offsetWidth,
-          height: nodeWrapperRef.current.offsetHeight,
-        });
-      }
-    });
-    resizeObserver.observe(nodeWrapperRef.current);
-    return () => resizeObserver.disconnect();
-  }, [nodeWrapperRef]);
-
-  return (
-    <StyledDiv ref={nodeWrapperRef} className={className}>
-      <StyledNodeWrapper>{node}</StyledNodeWrapper>
-      <StyledChildWrapper>
-        {nodeDimensions && children(nodeDimensions)}
-      </StyledChildWrapper>
-    </StyledDiv>
-  );
-};

packages/twenty-ui/src/utilities/index.ts

@@ -9,7 +9,7 @@ export * from './color/utils/stringToHslColor';
 export * from './device/getOsControlSymbol';
 export * from './device/getOsShortcutSeparator';
 export * from './device/getUserDevice';
-export * from './dimensions/components/ComputeNodeDimensions';
+export * from './dimensions/components/AutogrowWrapper';
 export * from './responsive/hooks/useIsMobile';
 export * from './screen-size/hooks/useScreenSize';
 export * from './state/utils/createState';