fixed dropdown for mobile width

harshit078 · Nov 7, 2024 · d8db205 · d8db205
1 parent ade1af4
commit d8db205
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/...ont/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx b/...ont/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
@@ -14,7 +14,7 @@ import {
   Section,
   useIcons,
 } from 'twenty-ui';
-
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isAnalyticsEnabledState } from '@/client-config/states/isAnalyticsEnabledState';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -40,10 +40,15 @@ import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types
 
 const OBJECT_DROPDOWN_WIDTH = 340;
 const ACTION_DROPDOWN_WIDTH = 140;
+const OBJECT_Mobile_WIDTH = 150;
+const ACTION_Mobile_WIDTH = 140;
 
-const StyledFilterRow = styled.div`
+const StyledFilterRow = styled.div<{ isMobile: boolean }>`
   display: grid;
-  grid-template-columns: ${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto;
+  grid-template-columns: ${({ isMobile }) =>
+    isMobile
+      ? `${OBJECT_Mobile_WIDTH}px ${ACTION_Mobile_WIDTH}px auto`
+      : `${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto`};
   gap: ${({ theme }) => theme.spacing(2)};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
   align-items: center;
@@ -57,7 +62,7 @@ const StyledPlaceholder = styled.div`
 export const SettingsDevelopersWebhooksDetail = () => {
   const { objectMetadataItems } = useObjectMetadataItems();
   const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
-
+  const isMobile = useIsMobile();
   const navigate = useNavigate();
   const { webhookId = '' } = useParams();
 
@@ -244,10 +249,12 @@ export const SettingsDevelopersWebhooksDetail = () => {
             description="Select the events you wish to send to this endpoint"
           />
           {operations.map((operation, index) => (
-            <StyledFilterRow key={index}>
+            <StyledFilterRow isMobile={isMobile} key={index}>
               <Select
                 withSearchInput
-                dropdownWidth={OBJECT_DROPDOWN_WIDTH}
+                dropdownWidth={
+                  isMobile ? OBJECT_Mobile_WIDTH : OBJECT_DROPDOWN_WIDTH
+                }
                 dropdownId={`object-webhook-type-select-${index}`}
                 value={operation.object}
                 onChange={(object) => updateOperation(index, 'object', object)}
@@ -260,7 +267,9 @@ export const SettingsDevelopersWebhooksDetail = () => {
               />
 
               <Select
-                dropdownWidth={ACTION_DROPDOWN_WIDTH}
+                dropdownWidth={
+                  isMobile ? ACTION_Mobile_WIDTH : ACTION_DROPDOWN_WIDTH
+                }
                 dropdownId={`operation-webhook-type-select-${index}`}
                 value={operation.action}
                 onChange={(action) => updateOperation(index, 'action', action)}