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

Scroll tab list on record show (#3561)

Browse Source 
* scroll tab list on record show #3275

* update the style of tab

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Jeet Desai
2024-01-24 23:00:58 +05:30
committed by GitHub
parent afbb87ae12
commit 21f342c5ea
4 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
View File

@ -29,6 +29,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { Section } from '@/ui/layout/section/components/Section'; import { Section } from '@/ui/layout/section/components/Section';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { FilterQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams'; import { FilterQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@ -40,6 +41,7 @@ const StyledHeader = styled.header<{ isDropdownOpen?: boolean }>`
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: ${({ theme }) => theme.spacing(2)}; margin-bottom: ${({ theme }) => theme.spacing(2)};
padding: ${() => (useIsMobile() ? '0 12px' : 'unset')};
${({ isDropdownOpen, theme }) => ${({ isDropdownOpen, theme }) =>
isDropdownOpen isDropdownOpen

7
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -20,10 +20,9 @@ const StyledInnerContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)}; gap: ${({ theme }) => theme.spacing(6)};
padding: ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => (useIsMobile() ? '12px 0' : theme.spacing(3))};
padding-right: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => (useIsMobile() ? 0 : theme.spacing(2))};
width: ${({ theme }) => width: ${() => (useIsMobile() ? `100%` : '348px')};
useIsMobile() ? `calc(100% - ${theme.spacing(5)})` : '348px'};
`; `;
const StyledIntermediateContainer = styled.div` const StyledIntermediateContainer = styled.div`

2
packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
View File

@ -30,7 +30,7 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: center; justify-content: center;
margin-bottom: -1px; margin-bottom: 0;
padding: ${({ theme }) => theme.spacing(2) + ' 0'}; padding: ${({ theme }) => theme.spacing(2) + ' 0'};
pointer-events: ${({ disabled }) => (disabled ? 'none' : '')}; pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
`; `;

1
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -29,6 +29,7 @@ const StyledContainer = styled.div`
height: 40px; height: 40px;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
user-select: none; user-select: none;
overflow: auto;
`; `;
export const TabList = ({ tabs, tabListId }: TabListProps) => { export const TabList = ({ tabs, tabListId }: TabListProps) => {