fixed dropdown

harshit078 · Nov 7, 2024 · db7ac7d · db7ac7d
1 parent 85967fb
commit db7ac7d
Showing 1 changed file with 15 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
@@ -37,13 +37,19 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
 import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 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 +63,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 +250,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 +268,7 @@ 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)}
@@ -311,4 +319,4 @@ export const SettingsDevelopersWebhooksDetail = () => {
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
-};
+};