admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed view bar chips margin and gaps (#10575)

Browse Source 
This PR fixed ViewBar chips that were using margin instead of padding
and gaps.

This SortOrFilter chip was using margin left to space itself where it
was the role of the view bar to handle gap between chips and
padding-left at the beginning.
This commit is contained in:
Lucas Bordeau
2025-02-28 11:39:59 +01:00
committed by GitHub
parent 8762c06ff2
commit 0c4a984110
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
View File

@ -46,8 +46,6 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
column-gap: ${({ theme }) => theme.spacing(1)}; column-gap: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
margin-left: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`

8
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View File

@ -25,9 +25,9 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates'; import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
import { isViewBarExpandedComponentState } from '@/views/states/isViewBarExpandedComponentState'; import { isViewBarExpandedComponentState } from '@/views/states/isViewBarExpandedComponentState';
import { t } from '@lingui/core/macro';
import { isNonEmptyArray } from '@sniptt/guards'; import { isNonEmptyArray } from '@sniptt/guards';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';
import { t } from '@lingui/core/macro';
export type ViewBarDetailsProps = { export type ViewBarDetailsProps = {
hasFilterButton?: boolean; hasFilterButton?: boolean;
@ -48,6 +48,7 @@ const StyledBar = styled.div`
min-height: 32px; min-height: 32px;
padding-top: ${({ theme }) => theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
z-index: 4; z-index: 4;
`; `;
@ -56,7 +57,7 @@ const StyledChipcontainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: scroll; overflow: scroll;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
z-index: 1; z-index: 1;
`; `;
@ -80,6 +81,8 @@ const StyledFilterContainer = styled.div`
align-items: center; align-items: center;
flex: 1; flex: 1;
overflow-x: hidden; overflow-x: hidden;
gap: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledSeperatorContainer = styled.div` const StyledSeperatorContainer = styled.div`
@ -99,7 +102,6 @@ const StyledSeperator = styled.div`
`; `;
const StyledAddFilterContainer = styled.div` const StyledAddFilterContainer = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
z-index: 5; z-index: 5;
`; `;