Fixes #7105: Fixed column header on Kanban boards (#7263)

Issue Reference: Fixes #7105

Description:
This pull request introduces adjustments to the styling of the
RecordBoardColumnHeader component. The modifications enhance the layout
and visual consistency of the Kanban board headers.

Changes Made:
Margin Adjustment:

Increased the bottom margin from theme.spacing(2) to theme.spacing(6)
for better spacing below the header.
Header Container Enhancements:

Added a background color sourced from the theme
(theme.background.primary) to the header container for improved
visibility and aesthetics.
Set a fixed height of 40px for the header to ensure a consistent size
across different screens.
Applied a fixed position to the header container to keep it visible at
the top during scrolling.
Added padding at the top using theme.spacing(2) for better alignment of
content within the header.


Before :



https://github.com/user-attachments/assets/fd1c2d65-5e50-489a-a388-c0c4e1bd015b



Now :


[now.webm](https://github.com/user-attachments/assets/bd4cfb86-fc14-4902-b84c-99d27b07859e)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -53,7 +53,7 @@ export const TabList = ({
 
   return (
     <TabListScope tabListScopeId={tabListId}>
-      <ScrollWrapper hideY contextProviderName="tabList">
+      <ScrollWrapper enableYScroll={false} contextProviderName="tabList">
         <StyledContainer className={className}>
           {tabs
             .filter((tab) => !tab.hide)

packages/twenty-front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
 type TopBarProps = {
   className?: string;
@@ -10,14 +10,15 @@ type TopBarProps = {
 };
 
 const StyledContainer = styled.div`
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   display: flex;
+
   flex-direction: column;
 `;
 
-const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
+const StyledTopBar = styled.div`
   align-items: center;
-  border-bottom: ${({ displayBottomBorder, theme }) =>
-    displayBottomBorder ? `1px solid ${theme.border.color.light}` : 'none'};
+
   box-sizing: border-box;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
@@ -26,6 +27,8 @@ const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
   height: 39px;
   justify-content: space-between;
   padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+
   z-index: 7;
 `;
 
@@ -44,10 +47,9 @@ export const TopBar = ({
   leftComponent,
   rightComponent,
   bottomComponent,
-  displayBottomBorder = true,
 }: TopBarProps) => (
   <StyledContainer className={className}>
-    <StyledTopBar displayBottomBorder={displayBottomBorder}>
+    <StyledTopBar>
       <StyledLeftSection>{leftComponent}</StyledLeftSection>
       <StyledRightSection>{rightComponent}</StyledRightSection>
     </StyledTopBar>

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -26,16 +26,16 @@ const StyledScrollWrapper = styled.div`
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
-  hideY?: boolean;
-  hideX?: boolean;
+  enableXScroll?: boolean;
+  enableYScroll?: boolean;
   contextProviderName: ContextProviderName;
 };
 
 export const ScrollWrapper = ({
   children,
   className,
-  hideX,
-  hideY,
+  enableXScroll = true,
+  enableYScroll = true,
   contextProviderName,
 }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
@@ -58,8 +58,8 @@ export const ScrollWrapper = ({
     options: {
       scrollbars: { autoHide: 'scroll' },
       overflow: {
-        y: hideY ? 'hidden' : undefined,
-        x: hideX ? 'hidden' : undefined,
+        x: enableXScroll ? undefined : 'hidden',
+        y: enableYScroll ? undefined : 'hidden',
       },
     },
     events: {