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

Remove Right-Edge Gap in Table Cell Display (#5992)

Browse Source 
fixes #5941 

![Screenshot from 2024-06-23
17-24-24](https://github.com/twentyhq/twenty/assets/59247136/ae67603a-824d-4e6b-b873-2d58e6296341)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Raunak Singh Jolly
2024-06-24 15:33:46 +05:30
committed by GitHub
parent e8f386ce43
commit 2e4ba9ca7b
6 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,6 +53,8 @@ const StyledTable = styled.table<{
color: ${({ theme }) => theme.font.color.primary};
border-right: 1px solid ${({ theme }) => theme.border.color.light};
padding: 0;
text-align: left;
:last-child {

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css
View File

@ -27,6 +27,6 @@
.cell-base-container-soft-focus {
background: var(--twentycrm-background-transparent-secondary);
border-radius: var(--twentycrm-border-radius-sm);
outline: 1px solid var(--twentycrm-font-color-extra-light);
border: 1px solid var(--twentycrm-font-color-extra-light);
}

9
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css
View File

@ -3,15 +3,12 @@
display: flex;
height: 100%;
overflow: hidden;
padding-left: 8px;
padding-right: 4px;
padding-left: 6px;
width: 100%;
}
.cell-display-outer-container-soft-focus {
background: var(--twentycrm-background-transparent-secondary);
border-radius: var(--twentycrm-border-radius-sm);
outline: 1px solid var(--twentycrm-font-color-extra-light);
.cell-display-with-soft-focus {
margin: -1px;
}
.cell-display-inner-container {

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

@ -23,7 +23,7 @@ export const RecordTableCellDisplayContainer = ({
onClick={onClick}
className={clsx({
[styles.cellDisplayOuterContainer]: true,
[styles.cellDisplayOuterContainerSoftFocus]: softFocus,
[styles.cellDisplayWithSoftFocus]: softFocus,
})}
ref={scrollRef}
>

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

@ -4,7 +4,8 @@ import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContain
export const RecordTableCellDisplayMode = ({
children,
}: React.PropsWithChildren<unknown>) => {
softFocus,
}: React.PropsWithChildren<{ softFocus?: boolean }>) => {
const isEmpty = useIsFieldEmpty();
if (isEmpty) {
@ -12,7 +13,7 @@ export const RecordTableCellDisplayMode = ({
}
return (
<RecordTableCellDisplayContainer>
<RecordTableCellDisplayContainer softFocus={softFocus}>
{children}
</RecordTableCellDisplayContainer>
);

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

@ -159,6 +159,7 @@ export const RecordTableCellSoftFocusMode = ({
<RecordTableCellDisplayContainer
onClick={handleClick}
scrollRef={scrollRef}
softFocus
>
{editModeContentOnly ? editModeContent : nonEditModeContent}
</RecordTableCellDisplayContainer>