From db31b83a86384b1ac4e39948fb864516c30fd565 Mon Sep 17 00:00:00 2001
From: bitloi <89318445+bitloi@users.noreply.github.com>
Date: Fri, 30 Jan 2026 13:35:52 -0500
Subject: [PATCH] fix: allow board column tag to shrink so aggregate value
 remains visible (#17372)

## Summary
When a select option label is long, it was pushing the aggregate value
(e.g., '12.6m') out of view because the tag had `flex-shrink: 0`.

Changed to `min-width: 0` and `overflow: hidden` to allow the tag to
shrink and truncate with ellipsis, keeping the aggregate value visible.

## Changes
- Modified `StyledTag` in
[RecordBoardColumnHeader.tsx](cci:7://file:///root/74/bronze/twenty/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx:0:0-0:0)
to allow shrinking

The
[Tag](cci:1://file:///root/74/bronze/twenty/packages/twenty-ui/src/components/tag/Tag.tsx:100:0-141:2)
component already has built-in text truncation with
`OverflowingTextWithTooltip`, so this change enables that functionality
to work properly.

Fixes #17350
```**

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordBoardColumnHeader.tsx    | 69 +++++++++++--------
 ...cordBoardColumnHeaderAggregateDropdown.tsx |  2 +-
 2 files changed, 40 insertions(+), 31 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 36ac81fa54..57997e5bf5 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
@@ -67,7 +67,14 @@ const StyledColumn = styled.div`
 `;
 
 const StyledTag = styled(Tag)`
-  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+`;
+
+const StyledDropdownContainer = styled.div`
+  min-width: 0;
+  overflow: hidden;
 `;
 
 export const RecordBoardColumnHeader = () => {
@@ -121,35 +128,37 @@ export const RecordBoardColumnHeader = () => {
       >
         <StyledHeaderContainer>
           <StyledLeftContainer>
-            <Dropdown
-              dropdownId={dropdownId}
-              dropdownPlacement="bottom-start"
-              dropdownOffset={{
-                x: 0,
-                y: 10,
-              }}
-              clickableComponent={
-                <StyledTag
-                  variant={
-                    columnDefinition.type === RecordGroupDefinitionType.Value
-                      ? 'solid'
-                      : 'outline'
-                  }
-                  color={
-                    columnDefinition.type === RecordGroupDefinitionType.Value
-                      ? columnDefinition.color
-                      : 'transparent'
-                  }
-                  text={columnDefinition.title}
-                  weight={
-                    columnDefinition.type === RecordGroupDefinitionType.Value
-                      ? 'regular'
-                      : 'medium'
-                  }
-                />
-              }
-              dropdownComponents={<RecordBoardColumnDropdownMenu />}
-            />
+            <StyledDropdownContainer>
+              <Dropdown
+                dropdownId={dropdownId}
+                dropdownPlacement="bottom-start"
+                dropdownOffset={{
+                  x: 0,
+                  y: 10,
+                }}
+                clickableComponent={
+                  <StyledTag
+                    variant={
+                      columnDefinition.type === RecordGroupDefinitionType.Value
+                        ? 'solid'
+                        : 'outline'
+                    }
+                    color={
+                      columnDefinition.type === RecordGroupDefinitionType.Value
+                        ? columnDefinition.color
+                        : 'transparent'
+                    }
+                    text={columnDefinition.title}
+                    weight={
+                      columnDefinition.type === RecordGroupDefinitionType.Value
+                        ? 'regular'
+                        : 'medium'
+                    }
+                  />
+                }
+                dropdownComponents={<RecordBoardColumnDropdownMenu />}
+              />
+            </StyledDropdownContainer>
 
             <RecordBoardColumnHeaderAggregateDropdown
               aggregateValue={recordIndexAggregateDisplayValueForGroupValue}
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 97fa050bb1..5070e04f5d 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
@@ -18,7 +18,7 @@ type RecordBoardColumnHeaderAggregateDropdownProps = {
 };
 
 const StyledContainer = styled.div`
-  overflow: hidden;
+  flex-shrink: 0;
 `;
 
 export const RecordBoardColumnHeaderAggregateDropdown = ({