Feat/view groups fast follow (#9513)

Fix #9512 

- 🟠 [Icon should be
lighter](https://discord.com/channels/1130383047699738754/1326487470895923222)
The current weight is the same as in Figma, waiting for confirmation
- 🟠 [None has an unwanted margin
left](https://discord.com/channels/1130383047699738754/1326493647796961323)
This component is used in lot of places, removing the padding left can
brake other places
- 🟢 [All cells should have a the same right
design](https://discord.com/channels/1130383047699738754/1326489001926066176)
- 🔴 [Group Sorting should not "freeze" when mouse is
release](https://discord.com/channels/1130383047699738754/1326494381795966996)
Can't find a good way to fix it, seems more related to the fact it's
running in debug mode.
- 🟢 [Alignment
issue](https://discord.com/channels/1130383047699738754/1326486523822084140)
- 🟢 [View record count
error](https://discord.com/channels/1130383047699738754/1326491489466978365)
- 🟢 [Vertically align tags and
numbers/count](https://discord.com/channels/1130383047699738754/1326490661800902728)
- 🟢 [Display "Calculate" only on hover in view
groups](https://discord.com/channels/1130383047699738754/1326490411929436191)
- 🟢 [Aggregates height in view groups is 28px instead of
32px](https://discord.com/channels/1130383047699738754/1326489587127943188)
- 🟠 [Picker under the
aggregate](https://discord.com/channels/1130383047699738754/1326487940557439039)
Can't reproduce the issue
- 🟢 [Icon should not be
hoverable](https://discord.com/channels/1130383047699738754/1326477402360123425)
- 🟢 [Crop long view
titles](https://discord.com/channels/1130383047699738754/1326477009576136755)
- 🟢 [Removing the group by on opportunities (group by none) give an
white
screen](https://discord.com/channels/1130383047699738754/1324651927962910750)

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ComponentProps, MouseEvent } from 'react';
-import { IconComponent, LightIconButton } from 'twenty-ui';
+import { IconComponent, isDefined, LightIconButton } from 'twenty-ui';
 
 const StyledHeader = styled.li`
   align-items: center;
@@ -41,6 +41,26 @@ const StyledEndIcon = styled.div`
 const StyledChildrenWrapper = styled.span`
   overflow: hidden;
   padding: 0 ${({ theme }) => theme.spacing(1)};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const StyledNonClickableStartIcon = styled.div`
+  align-items: center;
+  background: transparent;
+  border: none;
+
+  display: flex;
+  flex-direction: row;
+
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+
+  white-space: nowrap;
+  height: 24px;
+  width: 24px;
 `;
 
 type DropdownMenuHeaderProps = ComponentProps<'li'> & {
@@ -76,13 +96,22 @@ export const DropdownMenuHeader = ({
       )}
       {StartIcon && (
         <StyledHeader data-testid={testId} className={className}>
-          <LightIconButton
-            testId="dropdown-menu-header-end-icon"
-            Icon={StartIcon}
-            accent="tertiary"
-            size="small"
-            onClick={onClick}
-          />
+          {isDefined(onClick) ? (
+            <LightIconButton
+              testId="dropdown-menu-header-end-icon"
+              Icon={StartIcon}
+              accent="tertiary"
+              size="small"
+              onClick={onClick}
+            />
+          ) : (
+            <StyledNonClickableStartIcon>
+              <StartIcon
+                size={theme.icon.size.sm}
+                color={theme.font.color.tertiary}
+              />
+            </StyledNonClickableStartIcon>
+          )}
           <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
         </StyledHeader>
       )}