From af9d3fb217b88410c6fa470d158eeb8c88166dda Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Fri, 15 Dec 2023 17:35:26 +0800
Subject: [PATCH] On RecordTable, if I have no records, the Record Table Layout
 is not broken (#2911)

* On RecordTable, if I have no records, the Record Table Layout is not broken

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Revert scrollbar changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* fix + button

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Revert unwanted changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Merge main

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* On RecordTable, if I have no records, the Record Table Layout is not broken

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add bottom border

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Always show + button

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Fix according to PR

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordTableHeader.tsx          | 29 ++++++++++++++-----
 .../components/MultipleEntitySelect.tsx       |  1 -
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
index 5d26421fd..aa1292872 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
@@ -6,6 +6,7 @@ import { RecordTableHeaderCell } from '@/object-record/record-table/components/R
 import { IconPlus } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
 
 import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
 
@@ -16,7 +17,7 @@ const StyledTableHead = styled.thead`
   cursor: pointer;
 `;
 
-const StyledPlusIconHeaderCell = styled.th`
+const StyledPlusIconHeaderCell = styled.th<{ isTableWiderThanScreen: boolean }>`
   ${({ theme }) => {
     return `
   &:hover {
@@ -25,10 +26,16 @@ const StyledPlusIconHeaderCell = styled.th`
   padding-left: ${theme.spacing(3)};
   `;
   }};
-  border-bottom: none !important;
   border-left: none !important;
   min-width: 32px;
-  position: relative;
+  ${({ isTableWiderThanScreen, theme }) =>
+    isTableWiderThanScreen &&
+    `position: relative;
+    right: 0;
+    width: 32px;
+    border-right: none !important;
+    background-color: ${theme.background.primary};
+    `};
   z-index: 1;
 `;
 
@@ -55,6 +62,12 @@ export const RecordTableHeader = ({
     useRecordTableScopedStates();
 
   const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
+
+  const scrollWrapper = useScrollWrapperScopedRef();
+  const isTableWiderThanScreen =
+    (scrollWrapper.current?.clientWidth ?? 0) <
+    (scrollWrapper.current?.scrollWidth ?? 0);
+
   const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
 
   const theme = useTheme();
@@ -78,8 +91,10 @@ export const RecordTableHeader = ({
             createRecord={createRecord}
           />
         ))}
-        {hiddenTableColumns.length > 0 && (
-          <StyledPlusIconHeaderCell>
+        <StyledPlusIconHeaderCell
+          isTableWiderThanScreen={isTableWiderThanScreen}
+        >
+          {hiddenTableColumns.length > 0 && (
             <DropdownScope
               dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
             >
@@ -96,8 +111,8 @@ export const RecordTableHeader = ({
                 }}
               />
             </DropdownScope>
-          </StyledPlusIconHeaderCell>
-        )}
+          )}
+        </StyledPlusIconHeaderCell>
       </tr>
     </StyledTableHead>
   );
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx
index b08006867..3ec2edafb 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import debounce from 'lodash.debounce';