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

This pull request addresses the alignment issue of the chevron icon, ensuring that it is positioned correctly on the right edge. Fixes [twentyhq#7403](twentyhq#7403) ![after fix](https://github.com/user-attachments/assets/84e6cd14-1d10-4331-8f25-da5423b15dd3) --------- Co-authored-by: Charles Bochet <[email protected]> Co-authored-by: ehconitin <[email protected]>
harshit078 · Oct 14, 2024 · 6d657fe · 6d657fe
1 parent a8fab83
commit 6d657fe
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/...nty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/...nty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 312px 132px 68px;
+  grid-template-columns: 312px auto 28px;
 `;
 
 const StyledNameTableCell = styled(TableCell)`
@@ -18,6 +18,7 @@ const StyledNameTableCell = styled(TableCell)`
 const StyledIconTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-left: 0;
 `;
 
 const StyledIconChevronRight = styled(IconChevronRight)`

diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
@@ -18,7 +18,7 @@ const StyledTableBody = styled(TableBody)`
 `;
 
 const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 312px 132px 68px;
+  grid-template-columns: 312px auto 28px;
 `;
 
 export const SettingsApiKeysTable = () => {

diff --git a/...ty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/...ty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 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';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 444px 68px;
+  grid-template-columns: 1fr 28px;
 `;
 
 const StyledIconTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-left: 0;
 `;
 
 const StyledUrlTableCell = styled(TableCell)`