Fix ellipsis overflow causing edit icon to be hidden on links (#5071)
Fixes #5064 ### Demo https://github.com/twentyhq/twenty/assets/21654351/28ab7374-c57e-4f7e-9720-05138c53a33d --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
@ -39,6 +39,7 @@ const StyledLabelAndIconContainer = styled.div`
|
|||||||
|
|
||||||
const StyledValueContainer = styled.div`
|
const StyledValueContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLabelContainer = styled.div<{ width?: number }>`
|
const StyledLabelContainer = styled.div<{ width?: number }>`
|
||||||
|
|||||||
@ -21,12 +21,17 @@ const StyledClickable = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledChip = styled(Chip)`
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: ${({ theme }) => theme.spacing(2)};
|
||||||
|
`;
|
||||||
|
|
||||||
export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
|
export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
|
||||||
<div>
|
<div>
|
||||||
{children !== '' ? (
|
{children !== '' ? (
|
||||||
<StyledClickable>
|
<StyledClickable>
|
||||||
<ReactLink target="_blank" to={href} onClick={onClick}>
|
<ReactLink target="_blank" to={href} onClick={onClick}>
|
||||||
<Chip
|
<StyledChip
|
||||||
label={`${children}`}
|
label={`${children}`}
|
||||||
variant={ChipVariant.Rounded}
|
variant={ChipVariant.Rounded}
|
||||||
size={ChipSize.Small}
|
size={ChipSize.Small}
|
||||||
|
|||||||
Reference in New Issue
Block a user