mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-27 03:33:21 +03:00
Fix event value elipsis (#5840)
<img width="400" alt="Capture d’écran 2024-06-12 à 14 41 08" src="https://github.com/twentyhq/twenty/assets/22936103/12d333a9-16ce-45f3-a1eb-060bf77bae96"> <img width="400" alt="Capture d’écran 2024-06-12 à 16 47 53" src="https://github.com/twentyhq/twenty/assets/22936103/6e154936-82d6-4e19-af4c-e6036b01dd04"> <img width="400" alt="Capture d’écran 2024-06-12 à 16 52 48" src="https://github.com/twentyhq/twenty/assets/22936103/6440af6b-ea40-4321-942a-a6e728a78104">
This commit is contained in:
parent
732e8912da
commit
007e0e8b0e
@ -27,6 +27,7 @@ const StyledCalendarEventContent = styled.div`
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const StyledCalendarEventTop = styled.div`
|
||||
@ -39,7 +40,9 @@ const StyledCalendarEventTop = styled.div`
|
||||
const StyledCalendarEventTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledCalendarEventBody = styled.div`
|
||||
|
@ -19,7 +19,7 @@ const StyledEventFieldDiffContainer = styled.div`
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
height: 24px;
|
||||
width: 250px;
|
||||
width: 380px;
|
||||
`;
|
||||
|
||||
export const EventFieldDiff = ({
|
||||
|
@ -15,6 +15,9 @@ type EventFieldDiffValueProps = {
|
||||
const StyledEventFieldDiffValue = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const EventFieldDiffValue = ({
|
||||
|
@ -13,6 +13,7 @@ import { isDefined } from '~/utils/isDefined';
|
||||
const StyledEventCardMessageContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 380px;
|
||||
`;
|
||||
|
||||
const StyledEmailContent = styled.div`
|
||||
@ -31,18 +32,21 @@ const StyledEmailTop = styled.div`
|
||||
const StyledEmailTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledEmailParticipants = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
`;
|
||||
|
||||
const StyledEmailBody = styled.div`
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const EventCardMessage = ({
|
||||
@ -103,15 +107,14 @@ export const EventCardMessage = ({
|
||||
|
||||
const messageParticipantHandles = message.messageParticipants
|
||||
.map((participant) => participant.handle)
|
||||
.filter((handle) => isDefined(handle) && handle !== '')
|
||||
.join(', ');
|
||||
|
||||
return (
|
||||
<StyledEventCardMessageContainer>
|
||||
<StyledEmailContent>
|
||||
<StyledEmailTop>
|
||||
<StyledEmailTitle>
|
||||
<div>{message.subject}</div>
|
||||
</StyledEmailTitle>
|
||||
<StyledEmailTitle>{message.subject}</StyledEmailTitle>
|
||||
<StyledEmailParticipants>
|
||||
<OverflowingTextWithTooltip text={messageParticipantHandles} />
|
||||
</StyledEmailParticipants>
|
||||
|
Loading…
Reference in New Issue
Block a user