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

Add box shadow on frozen first column on table (#6250)

Browse Source 
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/e8b39269-0c3d-4a90-9891-3f772c330165">

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/9f97e166-dfa8-44b2-86a4-db06bc7962b7">
This commit is contained in:
Charles Bochet
2024-07-15 19:01:47 +02:00
committed by GitHub
parent 2cd624a5ab
commit 753095dfa5
2 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx
View File

@ -25,6 +25,16 @@ const StyledTbody = styled.tbody<{
position: sticky; position: sticky;
left: 39px; left: 39px;
z-index: 5; z-index: 5;
&::after {
content: '';
position: absolute;
top: -1px;
height: calc(100% + 2px);
width: 4px;
right: 0px;
box-shadow: ${({ theme }) => theme.boxShadow.light};
clip-path: inset(0px -4px 0px 0px);
}
} }
} }
`; `;

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

@ -39,6 +39,16 @@ const StyledTableHead = styled.thead<{
position: sticky; position: sticky;
left: 39px; left: 39px;
z-index: 5; z-index: 5;
&::after {
content: '';
position: absolute;
top: -1px;
height: calc(100% + 2px);
width: 4px;
right: 0px;
box-shadow: ${({ theme }) => theme.boxShadow.light};
clip-path: inset(0px -4px 0px 0px);
}
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {
width: 35px; width: 35px;
max-width: 35px; max-width: 35px;