From 3e8fee7ff78a741835aa8c391081894647bb1694 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:46:47 +0100
Subject: [PATCH] Fix overflowing aggregate value on kanban header (#9614)

before


![image](https://github.com/user-attachments/assets/d7a98f27-ec66-4341-8c49-1b0626e923db)

after

<img width="232" alt="image"
src="https://github.com/user-attachments/assets/5bdd286e-b60c-42f1-aaca-d1d6ee6e82aa"
/>
---
 .../components/RecordBoardColumnHeader.tsx    |  8 ++-
 ...cordBoardColumnHeaderAggregateDropdown.tsx | 67 ++++++++++---------
 ...ardColumnHeaderAggregateDropdownButton.tsx | 14 ++--
 3 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
index a00de725b..22321dc5b 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
@@ -28,6 +28,7 @@ const StyledHeaderActions = styled.div`
   display: flex;
   margin-left: auto;
 `;
+
 const StyledHeaderContainer = styled.div`
   background: ${({ theme }) => theme.background.primary};
   display: flex;
@@ -38,6 +39,7 @@ const StyledLeftContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
 `;
 
 const StyledRightContainer = styled.div`
@@ -57,6 +59,10 @@ const StyledColumn = styled.div`
   position: relative;
 `;
 
+const StyledTag = styled(Tag)`
+  flex-shrink: 0;
+`;
+
 export const RecordBoardColumnHeader = () => {
   const { columnDefinition } = useContext(RecordBoardColumnContext);
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
@@ -106,7 +112,7 @@ export const RecordBoardColumnHeader = () => {
       >
         <StyledHeaderContainer>
           <StyledLeftContainer>
-            <Tag
+            <StyledTag
               onClick={handleBoardColumnMenuOpen}
               variant={
                 columnDefinition.type === RecordGroupDefinitionType.Value
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx
index 197f63433..f384739a6 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx
@@ -9,6 +9,7 @@ import { RecordBoardColumnHeaderAggregateDropdownContext } from '@/object-record
 import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope';
 import { RecordBoardColumnHeaderAggregateContentId } from '@/object-record/record-board/types/RecordBoardColumnHeaderAggregateContentId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import styled from '@emotion/styled';
 
 type RecordBoardColumnHeaderAggregateDropdownProps = {
   aggregateValue?: string | number;
@@ -17,6 +18,10 @@ type RecordBoardColumnHeaderAggregateDropdownProps = {
   dropdownId: string;
 };
 
+const StyledContainer = styled.div`
+  overflow: hidden;
+`;
+
 export const RecordBoardColumnHeaderAggregateDropdown = ({
   objectMetadataItem,
   aggregateValue,
@@ -34,36 +39,38 @@ export const RecordBoardColumnHeaderAggregateDropdown = ({
     <RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider
       value={{ instanceId: dropdownId }}
     >
-      <Dropdown
-        onClose={handleResetContent}
-        dropdownId={dropdownId}
-        dropdownHotkeyScope={{
-          scope: RecordBoardColumnHotkeyScope.ColumnHeader,
-        }}
-        dropdownMenuWidth={DROPDOWN_WIDTH}
-        dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
-        clickableComponent={
-          <RecordBoardColumnHeaderAggregateDropdownButton
-            dropdownId={dropdownId}
-            value={aggregateValue}
-            tooltip={aggregateLabel}
-          />
-        }
-        dropdownComponents={
-          <RecordBoardColumnHeaderAggregateDropdownContext.Provider
-            value={{
-              currentContentId,
-              onContentChange: handleContentChange,
-              resetContent: handleResetContent,
-              previousContentId,
-              objectMetadataItem: objectMetadataItem,
-              dropdownId: dropdownId,
-            }}
-          >
-            <AggregateDropdownContent />
-          </RecordBoardColumnHeaderAggregateDropdownContext.Provider>
-        }
-      />
+      <StyledContainer>
+        <Dropdown
+          onClose={handleResetContent}
+          dropdownId={dropdownId}
+          dropdownHotkeyScope={{
+            scope: RecordBoardColumnHotkeyScope.ColumnHeader,
+          }}
+          dropdownMenuWidth={DROPDOWN_WIDTH}
+          dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
+          clickableComponent={
+            <RecordBoardColumnHeaderAggregateDropdownButton
+              dropdownId={dropdownId}
+              value={aggregateValue}
+              tooltip={aggregateLabel}
+            />
+          }
+          dropdownComponents={
+            <RecordBoardColumnHeaderAggregateDropdownContext.Provider
+              value={{
+                currentContentId,
+                onContentChange: handleContentChange,
+                resetContent: handleResetContent,
+                previousContentId,
+                objectMetadataItem: objectMetadataItem,
+                dropdownId: dropdownId,
+              }}
+            >
+              <AggregateDropdownContent />
+            </RecordBoardColumnHeaderAggregateDropdownContext.Provider>
+          }
+        />
+      </StyledContainer>
     </RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
index e1a8fdcf8..2bc92e711 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
@@ -1,9 +1,12 @@
-import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import styled from '@emotion/styled';
 import { AppTooltip, Tag, TooltipDelay } from 'twenty-ui';
 
-const StyledButton = styled(StyledHeaderDropdownButton)`
+const StyledTag = styled(Tag)`
+  width: 100%;
+`;
+
+const StyledContainer = styled.div`
   padding: 0;
 `;
 
@@ -17,10 +20,11 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
   tooltip?: string;
 }) => {
   const { isDropdownOpen } = useDropdown(dropdownId);
+
   return (
     <div id={dropdownId}>
-      <StyledButton>
-        <Tag
+      <StyledContainer>
+        <StyledTag
           text={value ? value.toString() : '-'}
           color={'transparent'}
           weight={'regular'}
@@ -35,7 +39,7 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
             delay={TooltipDelay.mediumDelay}
           />
         )}
-      </StyledButton>
+      </StyledContainer>
     </div>
   );
 };