From cabae4c46239b4473eb5d278b2744df62e62bf8b Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Mon, 28 Oct 2024 21:41:41 +0530
Subject: [PATCH] fix: TimeZone dropdown clips through screen in Mobile
 viewport (#7935)

## Description

- This PR fixes the issue #7934

---------

Co-authored-by: martmull <martmull@hotmail.fr>
---
 .../src/modules/ui/input/components/Select.tsx           | 9 ++++++++-
 .../components/DateTimeSettingsDateFormatSelect.tsx      | 1 +
 .../components/DateTimeSettingsTimeFormatSelect.tsx      | 1 +
 .../components/DateTimeSettingsTimeZoneSelect.tsx        | 3 ++-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
index 21e1fb4ee..54c9b1a79 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/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
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
index 295705187..4d411876b 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
+++ b/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={[
         {
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
index 66aaed97a..84b161dc5 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
+++ b/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={[
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
index 237550a1a..74b119113 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
+++ b/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={[