twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 20:42:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixing last column width in table-view (#7258)

Browse Source 
fixes: #7160 

`table-layout: fixed` requires a width, added that.

Screenshots:
<img width="1509" alt="image"
src="https://github.com/user-attachments/assets/edb4f900-bc83-4aa4-bcce-85d73c0015d6">
<img width="1507" alt="image"
src="https://github.com/user-attachments/assets/79b28ad1-2a02-4d85-b991-55c545adaa36">

Small screen:
<div style="display:flex;">
<img width="40%" alt="image"
src="https://github.com/user-attachments/assets/26234bdc-163f-48ba-a04d-eef3b9112de6">
<img width="40%" alt="image"
src="https://github.com/user-attachments/assets/4fe653d1-703d-4ef6-b256-30996de1fa13">
</div>

---------

Co-authored-by: sid0-0 <a@b.com>
This commit is contained in:
sid0-0 2024-09-25 21:55:58 +05:30 committed by GitHub
parent 729c990546
commit 89b50c020f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -13,10 +13,8 @@ import { useRecoilValue } from 'recoil';
const StyledTable = styled.table` const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
border-spacing: 0; border-spacing: 0;
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed; table-layout: fixed;
width: 100%;
width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
`; `;
type RecordTableProps = { type RecordTableProps = {

4
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx
View File

@ -43,8 +43,8 @@ const StyledTd = styled.td<{
${({ freezeFirstColumns }) => ${({ freezeFirstColumns }) =>
freezeFirstColumns freezeFirstColumns
? `@media (max-width: ${MOBILE_VIEWPORT}px) { ? `@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 35px; width: 32px;
max-width: 35px; max-width: 32px;
}` }`
: ''} : ''}
`; `;

5
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
View File

@ -19,7 +19,6 @@ const StyledPlusIconHeaderCell = styled.th<{
&:hover { &:hover {
background: ${theme.background.transparent.light}; background: ${theme.background.transparent.light};
}; };
padding-left: ${theme.spacing(3)};
`; `;
}}; }};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@ -28,12 +27,12 @@ const StyledPlusIconHeaderCell = styled.th<{
border-left: none !important; border-left: none !important;
color: ${({ theme }) => theme.font.color.tertiary}; color: ${({ theme }) => theme.font.color.tertiary};
min-width: 32px; min-width: 32px;
width: 32px;
border-right: none !important; border-right: none !important;
${({ isTableWiderThanScreen, theme }) => ${({ isTableWiderThanScreen, theme }) =>
isTableWiderThanScreen isTableWiderThanScreen
? ` ? `
width: 32px;
background-color: ${theme.background.primary}; background-color: ${theme.background.primary};
` `
: ''}; : ''};
@ -45,7 +44,7 @@ const StyledPlusIconContainer = styled.div`
display: flex; display: flex;
height: 32px; height: 32px;
justify-content: center; justify-content: center;
width: 32px; width: 100%;
`; `;
const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID = const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID =