From 21f342c5ea0a974b262a127e1717f03aac1191e2 Mon Sep 17 00:00:00 2001
From: Jeet Desai <52026385+jeet1desai@users.noreply.github.com>
Date: Wed, 24 Jan 2024 23:00:58 +0530
Subject: [PATCH] Scroll tab list on record show (#3561)

* scroll tab list on record show #3275

* update the style of tab

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordRelationFieldCardSection.tsx          | 2 ++
 .../layout/show-page/components/ShowPageLeftContainer.tsx  | 7 +++----
 .../src/modules/ui/layout/tab/components/Tab.tsx           | 2 +-
 .../src/modules/ui/layout/tab/components/TabList.tsx       | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
index 759836875..4376f850a 100644
--- a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
@@ -29,6 +29,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { Section } from '@/ui/layout/section/components/Section';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { FilterQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
@@ -40,6 +41,7 @@ const StyledHeader = styled.header<{ isDropdownOpen?: boolean }>`
   align-items: center;
   display: flex;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding: ${() => (useIsMobile() ? '0 12px' : 'unset')};
 
   ${({ isDropdownOpen, theme }) =>
     isDropdownOpen
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
index 51918a438..4c83d666d 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
@@ -20,10 +20,9 @@ const StyledInnerContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  width: ${({ theme }) =>
-    useIsMobile() ? `calc(100% - ${theme.spacing(5)})` : '348px'};
+  padding: ${({ theme }) => (useIsMobile() ? '12px 0' : theme.spacing(3))};
+  padding-right: ${({ theme }) => (useIsMobile() ? 0 : theme.spacing(2))};
+  width: ${() => (useIsMobile() ? `100%` : '348px')};
 `;
 
 const StyledIntermediateContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
index f6c6368a2..7866503be 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
@@ -30,7 +30,7 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
-  margin-bottom: -1px;
+  margin-bottom: 0;
   padding: ${({ theme }) => theme.spacing(2) + ' 0'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
 `;
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 6c9663632..157fb7aa2 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
@@ -29,6 +29,7 @@ const StyledContainer = styled.div`
   height: 40px;
   padding-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
+  overflow: auto;
 `;
 
 export const TabList = ({ tabs, tabListId }: TabListProps) => {