Chip right height according to view

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx

@@ -1,9 +1,12 @@
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { ViewType } from '@/views/types/ViewType';
 import { useContext } from 'react';
-import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
+import { useRecoilValue } from 'recoil';
+import { AvatarChip, AvatarChipVariant, ChipSize } from 'twenty-ui';
 
 export type RecordIdentifierChipProps = {
   objectNameSingular: string;
@@ -17,6 +20,7 @@ export const RecordIdentifierChip = ({
   variant,
 }: RecordIdentifierChipProps) => {
   const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext);
+  const recordIndexViewType = useRecoilValue(recordIndexViewTypeState);
   const { recordChipData } = useRecordChipData({
     objectNameSingular,
     record,
@@ -38,6 +42,11 @@ export const RecordIdentifierChip = ({
       variant={variant}
       LeftIcon={LeftIcon}
       LeftIconColor={LeftIconColor}
+      size={
+        recordIndexViewType === ViewType.Kanban
+          ? ChipSize.Large
+          : ChipSize.Small
+      }
     />
   );
 };

packages/twenty-ui/src/display/chip/components/AvatarChip.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { Avatar } from '@ui/display/avatar/components/Avatar';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
-import { Chip, ChipVariant } from '@ui/display/chip/components/Chip';
+import { Chip, ChipSize, ChipVariant } from '@ui/display/chip/components/Chip';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
 import { isDefined } from '@ui/utilities/isDefined';
@@ -13,6 +13,7 @@ export type AvatarChipProps = {
   avatarUrl?: string;
   avatarType?: Nullable<AvatarType>;
   variant?: AvatarChipVariant;
+  size?: ChipSize;
   LeftIcon?: IconComponent;
   LeftIconColor?: string;
   isIconInverted?: boolean;
@@ -47,6 +48,7 @@ export const AvatarChip = ({
   className,
   placeholderColorSeed,
   onClick,
+  size = ChipSize.Small,
 }: AvatarChipProps) => {
   const { theme } = useContext(ThemeContext);
 
@@ -60,6 +62,7 @@ export const AvatarChip = ({
             : ChipVariant.Regular
           : ChipVariant.Transparent
       }
+      size={size}
       leftComponent={
         isDefined(LeftIcon) ? (
           isIconInverted === true ? (

packages/twenty-ui/src/display/chip/components/Chip.tsx

@@ -66,7 +66,8 @@ const StyledContainer = withTheme(styled.div<
   display: inline-flex;
   justify-content: center;
   gap: ${({ theme }) => theme.spacing(1)};
-  height: ${({ theme }) => theme.spacing(4)};
+  height: ${({ theme, size }) =>
+    size === ChipSize.Large ? theme.spacing(4) : theme.spacing(3)};
   max-width: ${({ maxWidth }) =>
     maxWidth
       ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
@@ -141,10 +142,7 @@ export const Chip = ({
       className={className}
     >
       {leftComponent}
-      <OverflowingTextWithTooltip
-        size={size === ChipSize.Large ? 'large' : 'small'}
-        text={label}
-      />
+      <OverflowingTextWithTooltip size={size} text={label} />
       {rightComponent}
     </StyledContainer>
   );