Fixed dropdown blur and unified components (#9062)

- Removed disableBlur property from dropdown because it is no longer needed since there's only one OverlayContainer component so there can be only one blur at a time. - Removed blur CSS properties from every component that used it because one standalone OverlayContainer is able to handle all cases if placed properly. - Also removed disableBackgroundBlur property from SingleRecordSelect - Removed FieldInputOverlay and FieldTextAreaOverlay components that were a first attempt to create something like an OverlayContainer - Used new unified OverlayContainer in RecordInlineCell and RecordTableCell - Fixed ScrollWrapper so that it works well both for dropdown with non overflowing content and dropdown with overflowing content. - Removed export default value on SearchVariablesDropdown as it is not used in this codebase - Refactored SearchVariablesDropdown function as component anti-pattern - Refactored SearchVariablesDropdownFieldItems UI problems with separator and missing ScrollWrapper behavior - Refactored SearchVariablesDropdownObjectItems with UI problems with separator and missing ScrollWrapper behavior - Fixed blur bug on Firefox due to wrong placement of the element that had the CSS property. Blur works on Firefox it it's on the container that has the highest level in the tree. - Fixed bug in ActivityTargetInlineCell by removing an unnecessary container component StyledSelectContainer - Unified problems of field height with a new common component FieldInputContainer, instead of putting width and height at the wrong abstraction level, width and height are a field's concern not a dropdown, overlay or low-level input concern. - Fixed block editor dropdown with new OverlayContainer - Aligning field dropdown with their anchor on inline and table cells, there are still many small pixel misalignments that give a low quality impression. - Fixed FormDateFieldInput that was missing OverlayContainer
2024-12-17 15:28:26 +01:00
parent 4aabe9e224
commit 860dec3428
66 changed files with 427 additions and 602 deletions
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx
@ -137,7 +137,6 @@ export const AdvancedFilterAddFilterRuleSelect = ({

  return (
    <Dropdown
-      disableBlur
      dropdownId={dropdownId}
      clickableComponent={
        <LightButton Icon={IconPlus} title="Add filter rule" />
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx
@ -22,7 +22,6 @@ export const AdvancedFilterLogicalOperatorDropdown = ({

  return (
    <Select
-      disableBlur
      fullWidth
      dropdownId={`advanced-filter-logical-operator-${viewFilterGroup.id}`}
      value={viewFilterGroup.logicalOperator}
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx
@ -68,7 +68,6 @@ export const AdvancedFilterRuleOptionsDropdown = ({

  return (
    <Dropdown
-      disableBlur
      dropdownId={dropdownId}
      clickableComponent={
        <AdvancedFilterRuleOptionsDropdownButton dropdownId={dropdownId} />
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx
@ -41,7 +41,6 @@ export const AdvancedFilterViewFilterFieldSelect = ({
  return (
    <StyledContainer>
      <Dropdown
-        disableBlur
        dropdownId={advancedFilterDropdownId}
        clickableComponent={
          <SelectControl
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx
@ -76,7 +76,6 @@ export const AdvancedFilterViewFilterOperandSelect = ({
  return (
    <StyledContainer>
      <Dropdown
-        disableBlur
        dropdownId={dropdownId}
        clickableComponent={
          <SelectControl
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx
@ -39,7 +39,6 @@ export const AdvancedFilterViewFilterValueInput = ({

  return (
    <Dropdown
-      disableBlur
      dropdownId={dropdownId}
      clickableComponent={
        <SelectControl
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
@ -98,7 +98,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
      {/** TODO: Should be removed when view settings contains more options */}
      {viewType === ViewType.Kanban && (
        <>
-          <DropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer withoutScrollWrapper>
            <MenuItem
              onClick={() => onContentChange('viewSettings')}
              LeftIcon={IconLayout}
@ -109,7 +109,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
          <DropdownMenuSeparator />
        </>
      )}
-      <DropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer withoutScrollWrapper>
        <MenuItem
          onClick={() => onContentChange('fields')}
          LeftIcon={IconTag}
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@ -81,11 +81,8 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
 `;

 const StyledTextInput = styled(TextInput)`
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${({ theme }) => theme.background.primary};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  width: ${({ theme }) => theme.spacing(53)};
  border-radius: ${({ theme }) => theme.border.radius.sm};
+  width: ${({ theme }) => theme.spacing(53)};
 `;

 const StyledBoardCardWrapper = styled.div`
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx
@ -6,6 +6,7 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { MenuItem } from 'twenty-ui';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';

 const StyledMenuContainer = styled.div`
  position: absolute;
@ -20,6 +21,7 @@ type RecordBoardColumnDropdownMenuProps = {
  stageId: string;
 };

+// TODO: unify and use Dropdown component
 export const RecordBoardColumnDropdownMenu = ({
  onClose,
 }: RecordBoardColumnDropdownMenuProps) => {
@ -39,21 +41,23 @@ export const RecordBoardColumnDropdownMenu = ({

  return (
    <StyledMenuContainer ref={boardColumnMenuRef}>
-      <DropdownMenu data-select-disable>
-        <DropdownMenuItemsContainer>
-          {recordGroupActions.map((action) => (
-            <MenuItem
-              key={action.id}
-              onClick={() => {
-                action.callback();
-                closeMenu();
-              }}
-              LeftIcon={action.icon}
-              text={action.label}
-            />
-          ))}
-        </DropdownMenuItemsContainer>
-      </DropdownMenu>
+      <OverlayContainer>
+        <DropdownMenu data-select-disable>
+          <DropdownMenuItemsContainer>
+            {recordGroupActions.map((action) => (
+              <MenuItem
+                key={action.id}
+                onClick={() => {
+                  action.callback();
+                  closeMenu();
+                }}
+                LeftIcon={action.icon}
+                text={action.label}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      </OverlayContainer>
    </StyledMenuContainer>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx
@ -1,23 +1,10 @@
-import styled from '@emotion/styled';
-
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
 import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
 import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useRecoilValue } from 'recoil';

-const StyledCompanyPickerContainer = styled.div`
-  align-items: center;
-  align-self: baseline;
-  background-color: ${({ theme }) => theme.background.primary};
-  border: none;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.tertiary};
-  cursor: pointer;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
 export const RecordBoardColumnNewOpportunity = ({
  columnId,
  position,
@ -36,9 +23,8 @@ export const RecordBoardColumnNewOpportunity = ({
  return (
    <>
      {newRecord.isCreating && newRecord.position === position && (
-        <StyledCompanyPickerContainer>
+        <OverlayContainer>
          <SingleRecordSelect
-            disableBackgroundBlur
            onCancel={() => handleCreateSuccess(position, columnId, false)}
            onRecordSelected={(company) =>
              company ? handleEntitySelect(position, company) : null
@ -47,7 +33,7 @@ export const RecordBoardColumnNewOpportunity = ({
            recordPickerInstanceId="relation-picker"
            selectedRecordIds={[]}
          />
-        </StyledCompanyPickerContainer>
+        </OverlayContainer>
      )}
    </>
  );
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
@ -3,7 +3,6 @@ import { FormFieldInputInputContainer } from '@/object-record/record-field/form-
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
 import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
-import { StyledCalendarContainer } from '@/ui/field/input/components/DateInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import {
  InternalDatePicker,
@ -16,6 +15,7 @@ import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'
 import { parseDateToString } from '@/ui/input/components/internal/date/utils/parseDateToString';
 import { parseStringToDate } from '@/ui/input/components/internal/date/utils/parseStringToDate';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { UserContext } from '@/users/contexts/UserContext';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
@ -338,7 +338,7 @@ export const FormDateFieldInput = ({
              {draftValue.mode === 'edit' ? (
                <StyledDateInputContainer>
                  <StyledDateInputAbsoluteContainer>
-                    <StyledCalendarContainer>
+                    <OverlayContainer>
                      <InternalDatePicker
                        date={pickerDate ?? new Date()}
                        isDateTimeInput={false}
@ -349,7 +349,7 @@ export const FormDateFieldInput = ({
                        onClear={handlePickerClear}
                        hideHeaderInput
                      />
-                    </StyledCalendarContainer>
+                    </OverlayContainer>
                  </StyledDateInputAbsoluteContainer>
                </StyledDateInputContainer>
              ) : null}
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx
@ -9,6 +9,7 @@ import { SelectOption } from '@/spreadsheet-import/types';
 import { SelectDisplay } from '@/ui/field/display/components/SelectDisplay';
 import { SelectInput } from '@/ui/field/input/components/SelectInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@ -238,19 +239,21 @@ export const FormSelectFieldInput = ({
        <StyledSelectInputContainer>
          {draftValue.type === 'static' &&
            draftValue.editingMode === 'edit' && (
-              <SelectInput
-                selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
-                selectableItemIdArray={optionIds}
-                hotkeyScope={hotkeyScope}
-                onEnter={handleSelectEnter}
-                onOptionSelected={handleSubmit}
-                options={options}
-                onCancel={onCancel}
-                defaultOption={selectedOption}
-                onFilterChange={setFilteredOptions}
-                onClear={handleClearField}
-                clearLabel={clearLabel}
-              />
+              <OverlayContainer>
+                <SelectInput
+                  selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
+                  selectableItemIdArray={optionIds}
+                  hotkeyScope={hotkeyScope}
+                  onEnter={handleSelectEnter}
+                  onOptionSelected={handleSubmit}
+                  options={options}
+                  onCancel={onCancel}
+                  defaultOption={selectedOption}
+                  onFilterChange={setFilteredOptions}
+                  onClear={handleClearField}
+                  clearLabel={clearLabel}
+                />
+              </OverlayContainer>
            )}
        </StyledSelectInputContainer>

--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx
@ -4,7 +4,6 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
 import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';

-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { useCurrencyField } from '../../hooks/useCurrencyField';

 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -118,21 +117,19 @@ export const CurrencyFieldInput = ({
  };

  return (
-    <FieldInputOverlay>
-      <CurrencyInput
-        value={draftValue?.amount?.toString() ?? ''}
-        currencyCode={currencyCode}
-        autoFocus
-        placeholder="Currency"
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        onChange={handleChange}
-        onSelect={handleSelect}
-        hotkeyScope={hotkeyScope}
-      />
-    </FieldInputOverlay>
+    <CurrencyInput
+      value={draftValue?.amount?.toString() ?? ''}
+      currencyCode={currencyCode}
+      autoFocus
+      placeholder="Currency"
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      onChange={handleChange}
+      onSelect={handleSelect}
+      hotkeyScope={hotkeyScope}
+    />
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx
@ -1,7 +1,6 @@
 import { useFullNameField } from '@/object-record/record-field/meta-types/hooks/useFullNameField';
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
-import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay';

 import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder';
 import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder';
@ -79,25 +78,23 @@ export const FullNameFieldInput = ({
  };

  return (
-    <FieldInputOverlay>
-      <DoubleTextInput
-        firstValue={draftValue?.firstName ?? ''}
-        secondValue={draftValue?.lastName ?? ''}
-        firstValuePlaceholder={
-          FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
-        }
-        secondValuePlaceholder={
-          LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
-        }
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        onPaste={handlePaste}
-        hotkeyScope={hotkeyScope}
-        onChange={handleChange}
-      />
-    </FieldInputOverlay>
+    <DoubleTextInput
+      firstValue={draftValue?.firstName ?? ''}
+      secondValue={draftValue?.lastName ?? ''}
+      firstValuePlaceholder={
+        FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+      }
+      secondValuePlaceholder={
+        LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+      }
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      onPaste={handlePaste}
+      hotkeyScope={hotkeyScope}
+      onChange={handleChange}
+    />
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import React, { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
@ -18,11 +17,6 @@ import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { toSpliced } from '~/utils/array/toSpliced';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';

-const StyledDropdownMenu = styled(DropdownMenu)`
-  margin: -1px;
-  position: relative;
-`;
-
 type MultiItemFieldInputProps<T> = {
  items: T[];
  onPersist: (updatedItems: T[]) => void;
@ -164,7 +158,7 @@ export const MultiItemFieldInput = <T,>({
  };

  return (
-    <StyledDropdownMenu ref={containerRef} width={200}>
+    <DropdownMenu ref={containerRef} width={200}>
      {!!items.length && (
        <>
          <DropdownMenuItemsContainer>
@ -222,6 +216,6 @@ export const MultiItemFieldInput = <T,>({
          />
        </DropdownMenuItemsContainer>
      )}
-    </StyledDropdownMenu>
+    </DropdownMenu>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx
@ -1,8 +1,8 @@
 import { TextInput } from '@/ui/field/input/components/TextInput';

-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
-import { useNumberField } from '../../hooks/useNumberField';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
+import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
+import { useNumberField } from '../../hooks/useNumberField';

 export type FieldInputEvent = (persist: () => void) => void;

@ -57,7 +57,7 @@ export const NumberFieldInput = ({
  };

  return (
-    <FieldInputOverlay>
+    <FieldInputContainer>
      <TextInput
        placeholder={fieldDefinition.metadata.placeHolder}
        autoFocus
@ -70,6 +70,6 @@ export const NumberFieldInput = ({
        hotkeyScope={hotkeyScope}
        onChange={handleChange}
      />
-    </FieldInputOverlay>
+    </FieldInputContainer>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
@ -18,7 +18,6 @@ export const DEFAULT_PHONE_COUNTRY_CODE = '1';

 const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
  font-family: ${({ theme }) => theme.font.family};
-  height: 32px;
  ${TEXT_INPUT_STYLE}
  padding: 0;

--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx
@ -1,4 +1,3 @@
-import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
 import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';

 import { useJsonField } from '../../hooks/useJsonField';
@ -59,20 +58,18 @@ export const RawJsonFieldInput = ({
  };

  return (
-    <FieldTextAreaOverlay>
-      <TextAreaInput
-        placeholder={fieldDefinition.metadata.placeHolder}
-        autoFocus
-        value={draftValue ?? ''}
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        hotkeyScope={hotkeyScope}
-        onChange={handleChange}
-        maxRows={25}
-      />
-    </FieldTextAreaOverlay>
+    <TextAreaInput
+      placeholder={fieldDefinition.metadata.placeHolder}
+      autoFocus
+      value={draftValue ?? ''}
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      hotkeyScope={hotkeyScope}
+      onChange={handleChange}
+      maxRows={25}
+    />
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx
@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import { RelationPicker } from '@/object-record/relation-picker/components/RelationPicker';
 import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';

@ -8,12 +6,6 @@ import { useRelationField } from '../../hooks/useRelationField';

 import { FieldInputEvent } from './DateTimeFieldInput';

-const StyledRelationPickerContainer = styled.div`
-  left: -1px;
-  position: absolute;
-  top: -1px;
-`;
-
 export type RelationToOneFieldInputProps = {
  onSubmit?: FieldInputEvent;
  onCancel?: () => void;
@ -33,14 +25,12 @@ export const RelationToOneFieldInput = ({
  };

  return (
-    <StyledRelationPickerContainer>
-      <RelationPicker
-        fieldDefinition={fieldDefinition}
-        selectedRecordId={fieldValue?.id}
-        onSubmit={handleSubmit}
-        onCancel={onCancel}
-        initialSearchFilter={initialSearchValue}
-      />
-    </StyledRelationPickerContainer>
+    <RelationPicker
+      fieldDefinition={fieldDefinition}
+      selectedRecordId={fieldValue?.id}
+      onSubmit={handleSubmit}
+      onCancel={onCancel}
+      initialSearchFilter={initialSearchValue}
+    />
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx
@ -1,9 +1,9 @@
-import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
 import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';

 import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';

+import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
 import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
 import {
  FieldInputClickOutsideEvent,
@ -57,7 +57,7 @@ export const TextFieldInput = ({
  };

  return (
-    <FieldTextAreaOverlay>
+    <FieldInputContainer>
      <TextAreaInput
        placeholder={fieldDefinition.metadata.placeHolder}
        autoFocus
@ -70,6 +70,6 @@ export const TextFieldInput = ({
        hotkeyScope={hotkeyScope}
        onChange={handleChange}
      />
-    </FieldTextAreaOverlay>
+    </FieldInputContainer>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
@ -9,6 +9,7 @@ const StyledInlineCellButtonContainer = styled.div`
  align-items: center;
  display: flex;
 `;
+
 export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
  return (
    <AnimatedContainer>
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
@ -1,4 +1,5 @@
 import { RecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 import { useContext } from 'react';
@ -11,24 +12,14 @@ const StyledInlineCellEditModeContainer = styled.div`
  width: 100%;
  position: absolute;
  height: 24px;
-`;

-const StyledInlineCellInput = styled.div`
-  align-items: center;
-  display: flex;
-
-  min-height: 32px;
-
-  width: 240px;
-
-  z-index: 30;
+  background: transparent;
 `;

 type RecordInlineCellEditModeProps = {
  children: React.ReactNode;
 };

-// TODO: Refactor this to avoid setting absolute px values.
 export const RecordInlineCellEditMode = ({
  children,
 }: RecordInlineCellEditModeProps) => {
@ -46,7 +37,7 @@ export const RecordInlineCellEditMode = ({
            }
          : {
              mainAxis: -29,
-              crossAxis: -4,
+              crossAxis: -5,
            },
      ),
    ],
@ -59,9 +50,9 @@ export const RecordInlineCellEditMode = ({
      data-testid="inline-cell-edit-mode-container"
    >
      {createPortal(
-        <StyledInlineCellInput ref={refs.setFloating} style={floatingStyles}>
+        <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
          {children}
-        </StyledInlineCellInput>,
+        </OverlayContainer>,
        document.body,
      )}
    </StyledInlineCellEditModeContainer>
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
@ -11,6 +11,7 @@ const StyledClickableContainer = styled.div<{
  readonly?: boolean;
  isCentered?: boolean;
 }>`
+  align-items: center;
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
  width: 100%;
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
@ -1,3 +1,4 @@
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 import { ReactElement } from 'react';
@ -12,16 +13,6 @@ const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModePr
  height: 100%;
 `;

-const StyledTableCellInput = styled.div`
-  align-items: center;
-  display: flex;
-
-  min-height: 32px;
-  min-width: 200px;
-
-  z-index: 10;
-`;
-
 export type RecordTableCellEditModeProps = {
  children: ReactElement;
  transparent?: boolean;
@ -37,8 +28,8 @@ export const RecordTableCellEditMode = ({
    middleware: [
      flip(),
      offset({
-        mainAxis: -31,
-        crossAxis: -2,
+        mainAxis: -33,
+        crossAxis: -3,
      }),
    ],
    whileElementsMounted: autoUpdate,
@ -49,9 +40,9 @@ export const RecordTableCellEditMode = ({
      ref={refs.setReference}
      data-testid="editable-cell-edit-mode-container"
    >
-      <StyledTableCellInput ref={refs.setFloating} style={floatingStyles}>
+      <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
        {children}
-      </StyledTableCellInput>
+      </OverlayContainer>
    </StyledEditableCellEditModeContainer>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
@ -96,6 +96,7 @@ export const MultiRecordSelect = ({
    [setSearchFilter],
  );

+  // TODO: refactor this in a separate component
  const results = (
    <DropdownMenuItemsContainer hasMaxHeight>
      <SelectableList
@ -139,7 +140,7 @@ export const MultiRecordSelect = ({
          onSubmit?.();
        }}
      />
-      <DropdownMenu ref={containerRef} data-select-disable>
+      <DropdownMenu ref={containerRef} data-select-disable width={200}>
        {dropdownPlacement?.includes('end') && (
          <>
            {isDefined(onCreate) && (
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelect.tsx
@ -9,12 +9,10 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { isDefined } from '~/utils/isDefined';

 export type SingleRecordSelectProps = {
-  disableBackgroundBlur?: boolean;
  width?: number;
 } & SingleRecordSelectMenuItemsWithSearchProps;

 export const SingleRecordSelect = ({
-  disableBackgroundBlur = false,
  EmptyIcon,
  emptyLabel,
  excludedRecordIds,
@ -45,12 +43,7 @@ export const SingleRecordSelect = ({
  });

  return (
-    <DropdownMenu
-      disableBlur={disableBackgroundBlur}
-      ref={containerRef}
-      width={width}
-      data-select-disable
-    >
+    <DropdownMenu ref={containerRef} width={width} data-select-disable>
      <SingleRecordSelectMenuItemsWithSearch
        {...{
          EmptyIcon,