Skip to content

Commit

Permalink
Left Padding removed in Settings Page Tabs (#7730)
Browse files Browse the repository at this point in the history
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.


<img width="722" alt="Screenshot 2024-10-16 at 5 06 26 AM"
src="https://github.com/user-attachments/assets/3c7648ac-e2a6-4871-b58b-d25b008a06f0">
<img width="789" alt="Screenshot 2024-10-16 at 5 49 18 AM"
src="https://github.com/user-attachments/assets/a6e61b4d-0245-4744-ae87-86fe01a6bc43">
<img width="725" alt="Screenshot 2024-10-16 at 6 22 30 AM"
src="https://github.com/user-attachments/assets/e6a19095-3ee4-431f-ba19-1182552a5c8d">

---------

Co-authored-by: Charles Bochet <[email protected]>
  • Loading branch information
shyamsundertard and charlesBochet authored Oct 21, 2024
1 parent 5e2df81 commit 34ef2d3
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;

Expand Down

0 comments on commit 34ef2d3

Please sign in to comment.