From 10e75174f5ae424eaf456777e4f9e18ec23a5d06 Mon Sep 17 00:00:00 2001 From: Vardhaman Bhandari <97441447+Vardhaman619@users.noreply.github.com> Date: Tue, 8 Oct 2024 20:12:13 +0530 Subject: [PATCH] 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 Co-authored-by: ehconitin --- .../components/SettingsApiKeysFieldItemTableRow.tsx | 3 ++- .../settings/developers/components/SettingsApiKeysTable.tsx | 2 +- .../components/SettingsDevelopersWebhookTableRow.tsx | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx index 4d4dc8d45..c8051eab0 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx +++ b/packages/twenty-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 index ede12c34b..6d70ada4c 100644 --- 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/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx index 0c093d5ec..d559f89a2 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx +++ b/packages/twenty-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)`