Left Padding removed in Settings Page Tabs #7730
Conversation
Welcome!
Hello there, congrats on your first PR! We're excited to have you contributing to this project. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request introduces changes to improve the layout of the Settings page tabs, focusing on padding adjustments and component flexibility.
- Added new
CustomPaddingscomponent inpackages/twenty-front/src/modules/ui/layout/tab/components/CustomPaddings.tsxfor dynamic padding control - Modified
TabListcomponent inpackages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsxto use CSS variables for flexible padding - Updated
SettingsAccountsCalendarChannelsContainerandSettingsAccountsMessageChannelsContainerto useCustomPaddingswith zero padding - Increased Node.js max old space size from 3000MB to 4096MB in
packages/twenty-front/package.jsonfor improved build performance
5 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile
| tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID} | ||
| tabs={tabs} | ||
| /> | ||
| <CustomPaddings padding="0"> |
There was a problem hiding this comment.
style: Consider using a constant for the padding value '0' for consistency and easier maintenance
| interface CustomPaddingsProps { | ||
| padding?: string | number; | ||
| children: React.ReactNode; | ||
| className?: string; |
There was a problem hiding this comment.
logic: className prop is defined but not used in the component
|
|
||
| return ( | ||
| <div | ||
| className={`custom-padding`} |
There was a problem hiding this comment.
style: Consider using the className prop here for better customization
| @@ -30,8 +30,9 @@ const StyledContainer = styled.div` | |||
| box-sizing: border-box; | |||
| display: flex; | |||
| gap: ${({ theme }) => theme.spacing(2)}; | |||
| padding: var(--custom-padding, ${({ theme }) => theme.spacing(2)}); | |||
There was a problem hiding this comment.
style: Consider using theme.spacing() for padding-bottom to maintain consistency with other spacing values
|
If there are any changes that have to be made in it please let me know. |
shyamsundertard
force-pushed
the
fix-settings-page
branch
from
ef170ff to
6c9b8df
Compare
shyamsundertard
force-pushed
the
fix-settings-page
branch
from
6c9b8df to
beb285d
Compare
|
@Bonapara can you please review this PR |
|
This is my first PR, and I'm learning as I go. |
|
Looks good from a design perspective; I'll leave the code to the tech team. |
|
Thanks for taking a look @shyamsundertard |
|
/award 150 |
|
Awarding shyamsundertard: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/shyamsundertard |
Fix: #7100
The
TabListcomponent, located in Tablist, 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 theTabListcomponent to be adjusted as required.Additional styles can also be applied as per requirements individually for Emails and Calendar section.