Fix: Adjust chevron alignment to the right edge (#7438)

This pull request addresses the alignment issue of the chevron icon,
ensuring that it is positioned correctly on the right edge.
Fixes [#7403](https://github.com/twentyhq/twenty/issues/7403)

![after
fix](https://github.com/user-attachments/assets/84e6cd14-1d10-4331-8f25-da5423b15dd3)

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: ehconitin <nitinkoche03@gmail.com>
This commit is contained in:
Vardhaman Bhandari
2024-10-08 20:12:13 +05:30
committed by GitHub
parent be171e84d7
commit 10e75174f5
3 changed files with 5 additions and 4 deletions

View File

@@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableRow } from '@/ui/layout/table/components/TableRow';
export const StyledApisFieldTableRow = styled(TableRow)` export const StyledApisFieldTableRow = styled(TableRow)`
grid-template-columns: 312px 132px 68px; grid-template-columns: 312px auto 28px;
`; `;
const StyledNameTableCell = styled(TableCell)` const StyledNameTableCell = styled(TableCell)`
@@ -18,6 +18,7 @@ const StyledNameTableCell = styled(TableCell)`
const StyledIconTableCell = styled(TableCell)` const StyledIconTableCell = styled(TableCell)`
justify-content: center; justify-content: center;
padding-right: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: 0;
`; `;
const StyledIconChevronRight = styled(IconChevronRight)` const StyledIconChevronRight = styled(IconChevronRight)`

View File

@@ -18,7 +18,7 @@ const StyledTableBody = styled(TableBody)`
`; `;
const StyledTableRow = styled(TableRow)` const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px 132px 68px; grid-template-columns: 312px auto 28px;
`; `;
export const SettingsApiKeysTable = () => { export const SettingsApiKeysTable = () => {

View File

@@ -1,4 +1,3 @@
import React from 'react';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconChevronRight } from 'twenty-ui'; import { IconChevronRight } from 'twenty-ui';
@@ -8,12 +7,13 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableRow } from '@/ui/layout/table/components/TableRow';
export const StyledApisFieldTableRow = styled(TableRow)` export const StyledApisFieldTableRow = styled(TableRow)`
grid-template-columns: 444px 68px; grid-template-columns: 1fr 28px;
`; `;
const StyledIconTableCell = styled(TableCell)` const StyledIconTableCell = styled(TableCell)`
justify-content: center; justify-content: center;
padding-right: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};
padding-left: 0;
`; `;
const StyledUrlTableCell = styled(TableCell)` const StyledUrlTableCell = styled(TableCell)`