Move shadow style from TableCell and InlineCell to FieldInputs (#2078)

* Move shadow style from TableCell and InlineCell to FieldInputs * Move overlay to inputs * Complete work
2023-10-17 20:59:56 +02:00
parent a40516df83
commit 01e9545a59
22 changed files with 164 additions and 194 deletions
--- a/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
@ -19,7 +19,7 @@ import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
 import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton';
 import { SelectAllCheckbox } from './SelectAllCheckbox';

-const COLUMN_MIN_WIDTH = 75;
+const COLUMN_MIN_WIDTH = 104;

 const StyledColumnHeaderCell = styled.th<{
  columnWidth: number;
--- a/front/src/modules/ui/data/data-table/constants/countries.json
+++ b/front/src/modules/ui/data/data-table/constants/countries.json
@ -1,52 +0,0 @@
-{
-  "ch": "Switzerland",
-  "de": "Germany",
-  "ca": "Canada",
-  "us": "US",
-  "se": "Sweden",
-  "jp": "Japan",
-  "au": "Australia",
-  "gb": "UK",
-  "fr": "France",
-  "dk": "Denmark",
-  "nz": "New Zealand",
-  "nl": "Netherlands",
-  "no": "Norway",
-  "it": "Italy",
-  "fi": "Finland",
-  "es": "Spain",
-  "cn": "China",
-  "be": "Belgium",
-  "sg": "Singapore",
-  "kr": "South Korea",
-  "ae": "UAE",
-  "at": "Austria",
-  "ie": "Ireland",
-  "lu": "Luxembourg",
-  "gr": "Greece",
-  "pt": "Portugal",
-  "br": "Brazil",
-  "th": "Thailand",
-  "qa": "Qatar",
-  "tr": "Turkey",
-  "in": "India",
-  "pl": "Poland",
-  "mx": "Mexico",
-  "sa": "Saudi Arabia",
-  "eg": "Egypt",
-  "ru": "Russia",
-  "il": "Israel",
-  "ar": "Argentina",
-  "my": "Malaysia",
-  "cr": "Costa Rica",
-  "id": "Indonesia",
-  "za": "South Africa",
-  "ma": "Morocco",
-  "cz": "Czechia",
-  "hr": "Croatia",
-  "ph": "Philippines",
-  "vn": "Vietnam",
-  "hu": "Hungary",
-  "cl": "Chile",
-  "pe": "Peru"
-}
--- a/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
+++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
@ -54,8 +54,6 @@ export const TableCellContainer = ({
  editModeContent,
  nonEditModeContent,
  editHotkeyScope,
-  transparent = false,
-  maxContentWidth,
  buttonIcon,
 }: TableCellContainerProps) => {
  const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
@ -114,8 +112,6 @@ export const TableCellContainer = ({
      >
        {isCurrentTableCellInEditMode ? (
          <TableCellEditMode
-            maxContentWidth={maxContentWidth}
-            transparent={transparent}
            editModeHorizontalAlign={editModeHorizontalAlign}
            editModeVerticalPosition={editModeVerticalPosition}
          >
--- a/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx
+++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx
@ -1,27 +1,12 @@
 import { ReactElement } from 'react';
 import styled from '@emotion/styled';

-import { overlayBackground } from '@/ui/theme/constants/effects';
-
 const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
  align-items: center;
-  border: ${({ transparent, theme }) =>
-    transparent ? 'none' : `1px solid ${theme.border.color.light}`};
-  border-radius: ${({ transparent, theme }) =>
-    transparent ? 'none' : theme.border.radius.sm};
  display: flex;
-  left: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
  margin: -1px;
-  max-width: ${({ maxContentWidth }) =>
-    maxContentWidth ? `${maxContentWidth}px` : 'none'};
-  min-height: 100%;
-  min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
-  position: absolute;
-  right: ${(props) =>
-    props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-  top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-  ${({ transparent }) => (transparent ? '' : overlayBackground)};
+  min-width: 200px;
+  width: calc(100% + 2px);
  z-index: 1;
 `;

@ -38,12 +23,8 @@ export const TableCellEditMode = ({
  editModeHorizontalAlign,
  editModeVerticalPosition,
  children,
-  transparent = false,
-  maxContentWidth,
 }: TableCellEditModeProps) => (
  <StyledEditableCellEditModeContainer
-    maxContentWidth={maxContentWidth}
-    transparent={transparent}
    data-testid="editable-cell-edit-mode-container"
    editModeHorizontalAlign={editModeHorizontalAlign}
    editModeVerticalPosition={editModeVerticalPosition}
--- a/front/src/modules/ui/data/field/meta-types/input/components/ChipFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/ChipFieldInput.tsx
@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useChipField } from '../../hooks/useChipField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type ChipFieldInputProps = {
@ -48,16 +49,18 @@ export const ChipFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={contentFieldValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={contentFieldValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type DoubleTextChipFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextChipFieldInput = ({
  };

  return (
-    <DoubleTextInput
-      firstValue={firstValue ?? ''}
-      secondValue={secondValue ?? ''}
-      firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
-      secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <DoubleTextInput
+        firstValue={firstValue ?? ''}
+        secondValue={secondValue ?? ''}
+        firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
+        secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx
@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useDoubleTextField } from '../../hooks/useDoubleTextField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type DoubleTextFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextFieldInput = ({
  };

  return (
-    <DoubleTextInput
-      firstValue={firstValue ?? ''}
-      secondValue={secondValue ?? ''}
-      firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
-      secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <DoubleTextInput
+        firstValue={firstValue ?? ''}
+        secondValue={secondValue ?? ''}
+        firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
+        secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx
@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useEmailField } from '../../hooks/useEmailField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type EmailFieldInputProps = {
@ -48,16 +49,18 @@ export const EmailFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx
@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/

 import { useMoneyField } from '../../hooks/useMoneyField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
+
 export type FieldInputEvent = (persist: () => void) => void;

 export type MoneyFieldInputProps = {
@ -46,16 +48,18 @@ export const MoneyFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue?.toLocaleString() ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue?.toLocaleString() ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx
@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/

 import { useNumberField } from '../../hooks/useNumberField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
+
 export type FieldInputEvent = (persist: () => void) => void;

 export type NumberFieldInputProps = {
@ -46,16 +48,18 @@ export const NumberFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue?.toString() ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue?.toString() ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx
@ -2,6 +2,7 @@ import { PhoneInput } from '@/ui/data/field/meta-types/input/components/internal

 import { usePhoneField } from '../../hooks/usePhoneField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type PhoneFieldInputProps = {
@ -46,16 +47,18 @@ export const PhoneFieldInput = ({
  };

  return (
-    <PhoneInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <PhoneInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx
@ -12,9 +12,9 @@ import { useRelationField } from '../../hooks/useRelationField';
 import { FieldInputEvent } from './DateFieldInput';

 const StyledRelationPickerContainer = styled.div`
-  left: 0px;
+  left: -1px;
  position: absolute;
-  top: -8px;
+  top: -1px;
 `;

 export type RelationFieldInputProps = {
--- a/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx
@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type TextFieldInputProps = {
@ -48,16 +49,18 @@ export const TextFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx
@ -2,6 +2,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/

 import { useURLField } from '../../hooks/useURLField';

+import { FieldInputOverlay } from './internal/FieldInputOverlay';
 import { FieldInputEvent } from './DateFieldInput';

 export type URLFieldInputProps = {
@ -46,16 +47,18 @@ export const URLFieldInput = ({
  };

  return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={fieldValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-    />
+    <FieldInputOverlay>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={fieldValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+      />
+    </FieldInputOverlay>
  );
 };
--- a/front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx
@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+import { overlayBackground } from '@/ui/theme/constants/effects';
+
+const StyledFieldInputOverlay = styled.div`
+  border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  ${overlayBackground}
+  display: flex;
+  height: 32px;
+  width: 100%;
+`;
+
+export const FieldInputOverlay = StyledFieldInputOverlay;
--- a/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
@ -38,6 +38,11 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
      outline: none;
    }
  }
+
+  & svg {
+    border-radius: ${({ theme }) => theme.border.radius.xs};
+    height: 12px;
+  }
 `;

 export type PhoneInputProps = {
--- a/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
@ -7,8 +7,8 @@ import { useRegisterInputEvents } from '../../hooks/useRegisterInputEvents';

 export const StyledInput = styled.input`
  margin: 0;
-  width: 100%;
  ${textInputStyle}
+  width: 100%;
 `;

 type TextInputProps = {
--- a/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx
+++ b/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx
@ -13,14 +13,11 @@ const StyledInlineCellEditModeContainer = styled.div<InlineCellEditModeProps>`

 const StyledInlineCellInput = styled.div`
  align-items: center;
-  background: ${({ theme }) => theme.background.transparent.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
  display: flex;
-
  margin-left: -1px;
+
  min-height: 32px;
+  min-width: 200px;
  width: inherit;

  z-index: 10;
--- a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
+++ b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
@ -29,7 +29,6 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
  color: ${({ color }) => color ?? 'none'};
  cursor: pointer;
  display: flex;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};

  height: 32px;

--- a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx
+++ b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx
@ -20,17 +20,18 @@ const StyledIconContainer = styled.div`

  svg {
    align-items: center;
+    border-radius: ${({ theme }) => theme.border.radius.xs};
    display: flex;
-    height: 16px;
+    height: 12px;
    justify-content: center;
  }
 `;

 const StyledDropdownMenuContainer = styled.ul`
-  left: 0;
+  left: 6px;
  padding: 0;
  position: absolute;
-  top: 24px;
+  top: 26px;
 `;

 export const CountryPickerDropdownSelect = ({
@ -57,7 +58,7 @@ export const CountryPickerDropdownSelect = ({
  return (
    <>
      <StyledDropdownMenuContainer data-select-disable>
-        <StyledDropdownMenu width={'240px'}>
+        <StyledDropdownMenu width="240px" disableBlur>
          <DropdownMenuSearchInput
            value={searchFilter}
            onChange={(event) => setSearchFilter(event.currentTarget.value)}
--- a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
+++ b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
@ -43,7 +43,7 @@ export const SingleEntitySelect = <
  onCreate,
  onEntitySelected,
  selectedEntity,
-  width,
+  width = 200,
 }: SingleEntitySelectProps<CustomEntityForSelect>) => {
  const containerRef = useRef<HTMLDivElement>(null);

--- a/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx
+++ b/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx
@ -7,7 +7,7 @@ export const StyledDropdownMenu = styled.div<{
  backdrop-filter: ${({ disableBlur }) =>
    disableBlur ? 'none' : 'blur(20px)'};

-  background: ${({ theme }) => theme.background.transparent.secondary};
+  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
  border-radius: ${({ theme }) => theme.border.radius.md};
  box-shadow: ${({ theme }) => theme.boxShadow.strong};