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

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
3 changed files with 5 additions and 8 deletions
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`
border-radius: ${({ theme }) => theme.border.radius.sm};
border-spacing: 0;
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed;
width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
width: 100%;
`;
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
? `@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 35px;
max-width: 35px;
width: 32px;
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 {
background: ${theme.background.transparent.light};
};
padding-left: ${theme.spacing(3)};
`;
}};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -28,12 +27,12 @@ const StyledPlusIconHeaderCell = styled.th<{
border-left: none !important;
color: ${({ theme }) => theme.font.color.tertiary};
min-width: 32px;
width: 32px;
border-right: none !important;
${({ isTableWiderThanScreen, theme }) =>
isTableWiderThanScreen
? `
width: 32px;
background-color: ${theme.background.primary};
`
: ''};
@@ -45,7 +44,7 @@ const StyledPlusIconContainer = styled.div`
display: flex;
height: 32px;
justify-content: center;
width: 32px;
width: 100%;
`;
const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID =