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 = () => { > - - - } - dropdownComponents={ - - - - } - /> + + + } + dropdownComponents={ + + + + } + /> + ); }; 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 (
- - + )} - +
); };