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}; color: ${({ theme }) => theme.font.color.primary};
border-right: 1px solid ${({ theme }) => theme.border.color.light}; border-right: 1px solid ${({ theme }) => theme.border.color.light};
padding: 0;
text-align: left; text-align: left;
:last-child { :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 { .cell-base-container-soft-focus {
background: var(--twentycrm-background-transparent-secondary); background: var(--twentycrm-background-transparent-secondary);
border-radius: var(--twentycrm-border-radius-sm); 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; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding-left: 8px; padding-left: 6px;
padding-right: 4px;
width: 100%; width: 100%;
} }
.cell-display-outer-container-soft-focus { .cell-display-with-soft-focus {
background: var(--twentycrm-background-transparent-secondary); margin: -1px;
border-radius: var(--twentycrm-border-radius-sm);
outline: 1px solid var(--twentycrm-font-color-extra-light);
} }
.cell-display-inner-container { .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} onClick={onClick}
className={clsx({ className={clsx({
[styles.cellDisplayOuterContainer]: true, [styles.cellDisplayOuterContainer]: true,
[styles.cellDisplayOuterContainerSoftFocus]: softFocus, [styles.cellDisplayWithSoftFocus]: softFocus,
})} })}
ref={scrollRef} 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 = ({ export const RecordTableCellDisplayMode = ({
children, children,
}: React.PropsWithChildren<unknown>) => { softFocus,
}: React.PropsWithChildren<{ softFocus?: boolean }>) => {
const isEmpty = useIsFieldEmpty(); const isEmpty = useIsFieldEmpty();
if (isEmpty) { if (isEmpty) {
@ -12,7 +13,7 @@ export const RecordTableCellDisplayMode = ({
} }
return ( return (
<RecordTableCellDisplayContainer> <RecordTableCellDisplayContainer softFocus={softFocus}>
{children} {children}
</RecordTableCellDisplayContainer> </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 <RecordTableCellDisplayContainer
onClick={handleClick} onClick={handleClick}
scrollRef={scrollRef} scrollRef={scrollRef}
softFocus
> >
{editModeContentOnly ? editModeContent : nonEditModeContent} {editModeContentOnly ? editModeContent : nonEditModeContent}
</RecordTableCellDisplayContainer> </RecordTableCellDisplayContainer>