From 34ef2d3d6d44945f7fc2aec9465ee0525465fc83 Mon Sep 17 00:00:00 2001 From: Shyamsunder Tard <130305690+shyamsundertard@users.noreply.github.com> Date: Tue, 22 Oct 2024 01:12:37 +0530 Subject: [PATCH] Left Padding removed in Settings Page Tabs (#7730) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix: #7100 The `TabList` component, located in [Tablist](packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx), wraps the Tabs and defines the padding, and is used in multiple places. The left padding for the Emails and Calendars sections of the Accounts in Settings has been removed ( list appear when there are multiple connected accounts ). However, the padding on the Record detail page remains unchanged. To address this, prop of css styles is added to `Tablist`, allowing for the padding of the `TabList` component to be adjusted as required. Additional styles can also be applied as per requirements individually for Emails and Calendar section. Screenshot 2024-10-16 at 5 06 26 AM Screenshot 2024-10-16 at 5 49 18 AM Screenshot 2024-10-16 at 6 22 30 AM --------- Co-authored-by: Charles Bochet --- .../ui/layout/show-page/components/ShowPageSubContainer.tsx | 1 + .../src/modules/ui/layout/tab/components/TabList.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx index 6f2c0aa442c9..29a53033ed5c 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx @@ -41,6 +41,7 @@ const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>` const StyledTabListContainer = styled.div` align-items: center; + padding-left: ${({ theme }) => theme.spacing(2)}; border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; box-sizing: border-box; display: flex; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index 8375cc0825fe..eac1de426813 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -31,7 +31,6 @@ const StyledContainer = styled.div` display: flex; gap: ${({ theme }) => theme.spacing(2)}; height: 40px; - padding-left: ${({ theme }) => theme.spacing(2)}; user-select: none; `;