From 41931c53e80ffdf6b47f8d21e1e5be533e0ca94d Mon Sep 17 00:00:00 2001
From: "gitstart-app[bot]"
 <57568882+gitstart-app[bot]@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:58:55 +0200
Subject: [PATCH] Record board columns design fix (full height borders) (#6350)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-5273](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-5273).
This ticket was imported from:
[TWNTY-5273](https://github.com/twentyhq/twenty/issues/5273)

 ---


## Description:

- We added a min-height to fix the main issue, in two components, one of
them needs \`calc\` because the border causes the creation of a
scrollbar
- The change on the overflow fixes the issue mentioned
[here](https://github.com/twentyhq/twenty/issues/5273#issuecomment-2232945913)

## Refs: #5273

## Demo:

\
<https://jam.dev/c/01cac1e5-ed66-439c-88fb-9406a06429c5>\
\
Fixes #5273

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
---
 .../object-record/record-board/components/RecordBoard.tsx    | 2 ++
 .../record-index/components/RecordIndexContainer.tsx         | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
index d6ffe57f2..bb0a6a07f 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
@@ -25,9 +25,11 @@ export type RecordBoardProps = {
 
 const StyledContainer = styled.div`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  overflow: auto;
   display: flex;
   flex: 1;
   flex-direction: row;
+  min-height: calc(100% - 1px);
 `;
 
 const StyledWrapper = styled.div`
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
index 39320c911..3e9f22e04 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
@@ -40,7 +40,8 @@ const StyledContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledContainerWithPadding = styled.div`
+const StyledContainerWithPadding = styled.div<{ fullHeight?: boolean }>`
+  min-height: ${({ fullHeight }) => (fullHeight ? '100%' : 'auto')};
   padding-left: ${({ theme }) => theme.table.horizontalCellPadding};
 `;
 
@@ -193,7 +194,7 @@ export const RecordIndexContainer = ({
             </>
           )}
           {recordIndexViewType === ViewType.Kanban && (
-            <StyledContainerWithPadding>
+            <StyledContainerWithPadding fullHeight>
               <RecordIndexBoardContainer
                 recordBoardId={recordIndexId}
                 viewBarId={recordIndexId}