From 6f5dc1c924773606a4520066c3bee3181331852e Mon Sep 17 00:00:00 2001
From: Syed Hamza Hussain
 <96618778+SyedHamzaHussain000@users.noreply.github.com>
Date: Fri, 18 Oct 2024 02:55:50 +0500
Subject: [PATCH] Bug Fix: created new div and p tag styles and wrap it on the
 workspace member as container  (#7581)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hello,
Hope you are doing well.I created a special style for the text to make
sure it stays in one line and wont exceed the width if the text width
will be more then 80px it will ecplise and set ... at the end of the
text.

I created these 2 styles variables and wrap my text in these styles
StyledObjectSummary
StyledEllipsisParagraph

Fixes #7574


#Screens Shots
<img width="1268" alt="Screenshot 2024-10-10 at 10 58 04 PM"
src="https://github.com/user-attachments/assets/2d3ef2c5-c4c8-489b-a205-50a48b986d60">

<img width="530" alt="Screenshot 2024-10-10 at 10 58 20 PM"
src="https://github.com/user-attachments/assets/e0d1cb48-dbc9-427a-99ac-54269c574360">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../SettingsDataModelFieldSettingsFormCard.tsx |  4 +++-
 ...sDataModelFieldRelationSettingsFormCard.tsx |  1 -
 .../SettingsDataModelFieldPreviewCard.tsx      |  1 -
 .../objects/SettingsDataModelObjectSummary.tsx | 18 +++++++++++-------
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
index 9b50515b1..ca1ef939a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
@@ -129,7 +129,9 @@ export const SettingsDataModelFieldSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldSettingsFormCardProps) => {
-  if (!previewableTypes.includes(fieldMetadataItem.type)) return null;
+  if (!previewableTypes.includes(fieldMetadataItem.type)) {
+    return null;
+  }
 
   if (fieldMetadataItem.type === FieldMetadataType.Boolean) {
     return (
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
index 0372ba071..59bee2006 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
@@ -23,7 +23,6 @@ type SettingsDataModelFieldRelationSettingsFormCardProps = {
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
 
 const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
-  display: grid;
   flex: 1 1 100%;
 `;
 
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
index 06684997a..360c9a300 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
@@ -19,7 +19,6 @@ const StyledCard = styled(Card)`
 `;
 
 const StyledCardContent = styled(CardContent)`
-  display: grid;
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
index f6b8aaa0a..931fb6990 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useIcons } from 'twenty-ui';
+import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
@@ -14,15 +14,17 @@ export type SettingsDataModelObjectSummaryProps = {
 const StyledObjectSummary = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
   justify-content: space-between;
 `;
 
 const StyledObjectName = styled.div`
-  align-items: center;
   display: flex;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(2)};
+  max-width: 60%;
+`;
+
+const StyledIconContainer = styled.div`
+  flex-shrink: 0;
 `;
 
 export const SettingsDataModelObjectSummary = ({
@@ -38,8 +40,10 @@ export const SettingsDataModelObjectSummary = ({
   return (
     <StyledObjectSummary className={className}>
       <StyledObjectName>
-        <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
-        {objectMetadataItem.labelPlural}
+        <StyledIconContainer>
+          <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
+        </StyledIconContainer>
+        <OverflowingTextWithTooltip text={objectMetadataItem.labelPlural} />
       </StyledObjectName>
       <SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
     </StyledObjectSummary>