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-front/src/modules/ui/input/components/EntityTitleDoubleTextInput.tsx

@@ -1,90 +0,0 @@
-import styled from '@emotion/styled';
-import { ChangeEvent } from 'react';
-
-import { StyledTextInput as UIStyledTextInput } from '@/ui/field/input/components/TextInput';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-
-import { ComputeNodeDimensions } from 'twenty-ui';
-import { InputHotkeyScope } from '../types/InputHotkeyScope';
-
-export type EntityTitleDoubleTextInputProps = {
-  firstValue: string;
-  secondValue: string;
-  firstValuePlaceholder: string;
-  secondValuePlaceholder: string;
-  onChange: (firstValue: string, secondValue: string) => void;
-  className?: string;
-};
-
-const StyledDoubleTextContainer = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-`;
-
-const StyledTextInput = styled(UIStyledTextInput)`
-  margin: 0 ${({ theme }) => theme.spacing(0.5)};
-  padding: 0;
-  width: ${({ width }) => (width ? `${width}px` : '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 const EntityTitleDoubleTextInput = ({
-  firstValue,
-  secondValue,
-  firstValuePlaceholder,
-  secondValuePlaceholder,
-  onChange,
-  className,
-}: EntityTitleDoubleTextInputProps) => {
-  const {
-    goBackToPreviousHotkeyScope,
-    setHotkeyScopeAndMemorizePreviousScope,
-  } = usePreviousHotkeyScope();
-  const handleFocus = () => {
-    setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
-  };
-  const handleBlur = () => {
-    goBackToPreviousHotkeyScope();
-  };
-
-  return (
-    <StyledDoubleTextContainer className={className}>
-      <ComputeNodeDimensions node={firstValue || firstValuePlaceholder}>
-        {(nodeDimensions) => (
-          <StyledTextInput
-            width={nodeDimensions?.width}
-            placeholder={firstValuePlaceholder}
-            value={firstValue}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              onChange(event.target.value, secondValue);
-            }}
-          />
-        )}
-      </ComputeNodeDimensions>
-      <ComputeNodeDimensions node={secondValue || secondValuePlaceholder}>
-        {(nodeDimensions) => (
-          <StyledTextInput
-            width={nodeDimensions?.width}
-            autoComplete="off"
-            placeholder={secondValuePlaceholder}
-            value={secondValue}
-            onFocus={handleFocus}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              onChange(firstValue, event.target.value);
-            }}
-          />
-        )}
-      </ComputeNodeDimensions>
-    </StyledDoubleTextContainer>
-  );
-};

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -11,12 +11,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import {
-  ComputeNodeDimensions,
-  IconComponent,
-  IconEye,
-  IconEyeOff,
-} from 'twenty-ui';
+import { AutogrowWrapper, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
@@ -64,6 +59,8 @@ const StyledInput = styled.input<
     inheritFontStyles ? 'inherit' : theme.font.weight.regular};
   height: ${({ sizeVariant }) =>
     sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
+  line-height: ${({ sizeVariant }) =>
+    sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
   outline: none;
   padding: ${({ theme, sizeVariant, autoGrow }) =>
     autoGrow
@@ -80,7 +77,6 @@ const StyledInput = styled.input<
   width: ${({ theme, width }) =>
     width ? `calc(${width}px + ${theme.spacing(0.5)})` : '100%'};
   max-width: ${({ autoGrow }) => (autoGrow ? '100%' : 'none')};
-
   &::placeholder,
   &::-webkit-input-placeholder {
     color: ${({ theme }) => theme.font.color.light};
@@ -296,13 +292,13 @@ const TextInputV2Component = forwardRef<
   },
 );
 
-const StyledComputeNodeDimensions = styled(ComputeNodeDimensions)<{
+const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
   sizeVariant?: TextInputV2Size;
 }>`
   border: 1px solid transparent;
   height: ${({ sizeVariant }) =>
     sizeVariant === 'sm' ? '20px' : sizeVariant === 'md' ? '28px' : '32px'};
-  padding: 0 ${({ theme }) => theme.spacing(1)};
+  padding: 0 ${({ theme }) => theme.spacing(1.25)};
   box-sizing: border-box;
 `;
 
@@ -313,19 +309,17 @@ const TextInputV2WithAutoGrowWrapper = forwardRef<
   return (
     <>
       {props.autoGrow ? (
-        <StyledComputeNodeDimensions
+        <StyledAutogrowWrapper
           sizeVariant={props.sizeVariant}
           node={props.value || props.placeholder}
         >
-          {(nodeDimensions) => (
-            <TextInputV2Component
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...props}
-              ref={ref}
-              width={nodeDimensions?.width}
-            />
-          )}
-        </StyledComputeNodeDimensions>
+          <TextInputV2Component
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            fullWidth={true}
+          />
+        </StyledAutogrowWrapper>
       ) : (
         <TextInputV2Component
           // eslint-disable-next-line react/jsx-props-no-spreading