Bug Fix: created new div and p tag styles and wrap it on the workspace member as container #7581
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request addresses text overflow issues in workspace member displays by introducing new styled components for text truncation with ellipsis.
- Added
StyledEllipsisParagraphinSettingsDataModelObjectSummary.tsxto truncate text exceeding 80px width - Removed
StyledObjectNameand object icon display fromSettingsDataModelObjectSummary.tsx - Modified
SettingsDataModelFieldSettingsFormCard.tsxandSettingsDataModelFieldRelationSettingsFormCard.tsxto incorporate new text styling - Deleted
.env.examplefiles from bothtwenty-frontandtwenty-serverpackages, potentially impacting project setup - Inconsistency between PR description and actual changes in
SettingsDataModelFieldRelationSettingsFormCard.tsxneeds addressing
5 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
Outdated
Show resolved
Hide resolved
...ta-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
Outdated
Show resolved
Hide resolved
...ages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
Outdated
Show resolved
Hide resolved
...dules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
Outdated
Show resolved
Hide resolved
...ta-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
Outdated
Show resolved
Hide resolved
|
@SyedHamzaHussain000 still missing the twenty-server .env.example :) |
|
@charlesBochet Sorry about that. I fixed that and push the new commit please check Thankyou |
|
@SyedHamzaHussain000 why are we getting rid of the icon? |
| display: flex; | ||
| font-weight: ${({ theme }) => theme.font.weight.medium}; | ||
| gap: ${({ theme }) => theme.spacing(1)}; | ||
| const StyledEllipsisParagraph = styled.p` |
There was a problem hiding this comment.
name is not clear: I prefer the existing StyledObjectName :)
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| margin: 0; |
There was a problem hiding this comment.
let's use a div and not a p, so we don't have to add margin: 0
| @@ -37,10 +38,9 @@ export const SettingsDataModelObjectSummary = ({ | |||
|
|
|||
| return ( | |||
| <StyledObjectSummary className={className}> | |||
| <StyledObjectName> | |||
| <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} /> | |||
There was a problem hiding this comment.
why are we removing the icon?
|
Also the CIs are not passing, a priori because of lint issues |
|
Taking over this one |
|
Awarding SyedHamzaHussain000: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/SyedHamzaHussain000 |
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
