scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 12:22:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Developers page dropdown not optimised for mobile viewport (#8392)

Browse Source 
## Description

- This PR is a minor fix to issue #8379 
- Fixed dropdown for mobile viewports

## Changes


https://github.com/user-attachments/assets/76692233-996e-4a1a-884a-84d31464fc85
This commit is contained in:
Harshit Singh
2024-11-09 12:29:15 +05:30
committed by GitHub
parent eb316074ef
commit 8ee827d05d
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
View File

@@ -14,6 +14,7 @@ import {
Section, Section,
useIcons, useIcons,
} from 'twenty-ui'; } from 'twenty-ui';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { AnalyticsActivityGraph } from '@/analytics/components/AnalyticsActivityGraph'; import { AnalyticsActivityGraph } from '@/analytics/components/AnalyticsActivityGraph';
import { AnalyticsGraphEffect } from '@/analytics/components/AnalyticsGraphEffect'; import { AnalyticsGraphEffect } from '@/analytics/components/AnalyticsGraphEffect';
@@ -41,10 +42,15 @@ import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types
const OBJECT_DROPDOWN_WIDTH = 340; const OBJECT_DROPDOWN_WIDTH = 340;
const ACTION_DROPDOWN_WIDTH = 140; 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; 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)}; gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)}; margin-bottom: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
@@ -58,7 +64,7 @@ const StyledPlaceholder = styled.div`
export const SettingsDevelopersWebhooksDetail = () => { export const SettingsDevelopersWebhooksDetail = () => {
const { objectMetadataItems } = useObjectMetadataItems(); const { objectMetadataItems } = useObjectMetadataItems();
const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState); const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
const isMobile = useIsMobile();
const navigate = useNavigate(); const navigate = useNavigate();
const { webhookId = '' } = useParams(); const { webhookId = '' } = useParams();
@@ -245,10 +251,12 @@ export const SettingsDevelopersWebhooksDetail = () => {
description="Select the events you wish to send to this endpoint" description="Select the events you wish to send to this endpoint"
/> />
{operations.map((operation, index) => ( {operations.map((operation, index) => (
<StyledFilterRow key={index}> <StyledFilterRow isMobile={isMobile} key={index}>
<Select <Select
withSearchInput withSearchInput
dropdownWidth={OBJECT_DROPDOWN_WIDTH} dropdownWidth={
isMobile ? OBJECT_MOBILE_WIDTH : OBJECT_DROPDOWN_WIDTH
}
dropdownId={`object-webhook-type-select-${index}`} dropdownId={`object-webhook-type-select-${index}`}
value={operation.object} value={operation.object}
onChange={(object) => updateOperation(index, 'object', object)} onChange={(object) => updateOperation(index, 'object', object)}
@@ -261,7 +269,9 @@ export const SettingsDevelopersWebhooksDetail = () => {
/> />
<Select <Select
dropdownWidth={ACTION_DROPDOWN_WIDTH} dropdownWidth={
isMobile ? ACTION_MOBILE_WIDTH : ACTION_DROPDOWN_WIDTH
}
dropdownId={`operation-webhook-type-select-${index}`} dropdownId={`operation-webhook-type-select-${index}`}
value={operation.action} value={operation.action}
onChange={(action) => updateOperation(index, 'action', action)} onChange={(action) => updateOperation(index, 'action', action)}