fix: TimeZone dropdown clips through screen in Mobile viewport (#7935)

## Description

- This PR fixes the issue #7934

---------

Co-authored-by: martmull <martmull@hotmail.fr>

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

@@ -31,6 +31,7 @@ export type SelectProps<Value extends string | number | null> = {
   disableBlur?: boolean;
   dropdownId: string;
   dropdownWidth?: `${string}px` | 'auto' | number;
+  dropdownWidthAuto?: boolean;
   emptyOption?: SelectOption<Value>;
   fullWidth?: boolean;
   label?: string;
@@ -60,6 +61,7 @@ export const Select = <Value extends string | number | null>({
   disableBlur = false,
   dropdownId,
   dropdownWidth = 176,
+  dropdownWidthAuto = false,
   emptyOption,
   fullWidth,
   label,
@@ -94,6 +96,11 @@ export const Select = <Value extends string | number | null>({
 
   const { closeDropdown } = useDropdown(dropdownId);
 
+  const dropDownMenuWidth =
+    dropdownWidthAuto && selectContainerRef.current?.clientWidth
+      ? selectContainerRef.current?.clientWidth
+      : dropdownWidth;
+
   return (
     <StyledContainer
       className={className}
@@ -111,7 +118,7 @@ export const Select = <Value extends string | number | null>({
       ) : (
         <Dropdown
           dropdownId={dropdownId}
-          dropdownMenuWidth={dropdownWidth}
+          dropdownMenuWidth={dropDownMenuWidth}
           dropdownPlacement="bottom-start"
           clickableComponent={
             <SelectControl

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx

@@ -28,6 +28,7 @@ export const DateTimeSettingsDateFormatSelect = ({
       dropdownWidth={218}
       label="Date format"
       fullWidth
+      dropdownWidthAuto
       value={value}
       options={[
         {

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx

@@ -27,6 +27,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
       dropdownId="datetime-settings-time-format"
       dropdownWidth={218}
       label="Time format"
+      dropdownWidthAuto
       fullWidth
       value={value}
       options={[

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx

@@ -19,9 +19,10 @@ export const DateTimeSettingsTimeZoneSelect = ({
 
   return (
     <Select
+      disableBlur
       dropdownId="settings-accounts-calendar-time-zone"
-      dropdownWidth={416}
       label="Time zone"
+      dropdownWidthAuto
       fullWidth
       value={value}
       options={[