Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Field name is oddly displayed when long #6755

Merged
merged 8 commits into from
Sep 3, 2024
Merged

Field name is oddly displayed when long #6755

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b05feb8
Field name is oddly displayed when long
gitstart-twenty Aug 27, 2024
cd119a4
Merge branch 'main' into TWNTY-6738
gitstart-twenty Aug 28, 2024
023ded1
Field name is oddly displayed when long on field header
gitstart-twenty Aug 28, 2024
526d382
Merge branch 'main' into TWNTY-6738
gitstart-twenty Aug 29, 2024
47310fc
fix overflow for long object names
gitstart-twenty Aug 29, 2024
574f610
Merge branch 'main' into TWNTY-6738
gitstart-twenty Sep 2, 2024
4784e72
add prop to handle styles on Breadcrumb and fix sidebar icon
gitstart-twenty Sep 2, 2024
de6917a
Remove space
ijreilly Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions ...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ const StyledNameTableCell = styled(TableCell)`
color: ${({ theme }) => theme.font.color.primary};
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledNameLabel = styled.div`
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

syntax: Missing opening curly brace for the styled component

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider adding max-width to StyledNameLabel for consistent truncation


const StyledIconTableCell = styled(TableCell)`
justify-content: center;
Expand Down Expand Up @@ -203,9 +209,15 @@ export const SettingsObjectFieldItemTableRow = ({
>
<StyledNameTableCell>
{!!Icon && (
<Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
<Icon
style={{ minWidth: theme.icon.size.md }}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
)}
{fieldMetadataItem.label}
<StyledNameLabel title={fieldMetadataItem.label}>
{fieldMetadataItem.label}
</StyledNameLabel>
</StyledNameTableCell>
<TableCell>{typeLabel}</TableCell>
<TableCell>
Expand Down
3 changes: 2 additions & 1 deletion packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes we did here fix the problem we found on our QA review, this component is also used in other places but we could not identify any problem in other places of the app

Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const StyledTitleContainer = styled.div`
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: ${({ theme }) => theme.spacing(1)};
max-width: 50%;
width: 100%;
`;

const StyledTopBarIconStyledTitleContainer = styled.div`
Expand All @@ -65,6 +65,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div`
flex: 1 0 auto;
gap: ${({ theme }) => theme.spacing(1)};
flex-direction: row;
width: 100%;
`;

const StyledPageActionContainer = styled.div`
Expand Down
6 changes: 5 additions & 1 deletion packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const StyledWrapper = styled.nav`
// font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
max-width: 100%;
`;

const StyledLink = styled(Link)`
Expand All @@ -24,6 +25,9 @@ const StyledLink = styled(Link)`

const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;

export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
Expand All @@ -33,7 +37,7 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
{link.href ? (
<StyledLink to={link.href}>{link.children}</StyledLink>
) : (
<StyledText>{link.children}</StyledText>
<StyledText title={link.children}>{link.children}</StyledText>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider applying the same overflow handling to StyledLink for consistency

{index < links.length - 1 && '/'}
</Fragment>
Expand Down
Loading