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;
|
flex-direction: column;
|
||||||
gap: ${({ theme }) => theme.spacing(2)};
|
gap: ${({ theme }) => theme.spacing(2)};
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledCalendarEventTop = styled.div`
|
const StyledCalendarEventTop = styled.div`
|
||||||
@ -39,7 +40,9 @@ const StyledCalendarEventTop = styled.div`
|
|||||||
const StyledCalendarEventTitle = styled.div`
|
const StyledCalendarEventTitle = styled.div`
|
||||||
color: ${({ theme }) => theme.font.color.primary};
|
color: ${({ theme }) => theme.font.color.primary};
|
||||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledCalendarEventBody = styled.div`
|
const StyledCalendarEventBody = styled.div`
|
||||||
|
@ -19,7 +19,7 @@ const StyledEventFieldDiffContainer = styled.div`
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: ${({ theme }) => theme.spacing(1)};
|
gap: ${({ theme }) => theme.spacing(1)};
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 250px;
|
width: 380px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const EventFieldDiff = ({
|
export const EventFieldDiff = ({
|
||||||
|
@ -15,6 +15,9 @@ type EventFieldDiffValueProps = {
|
|||||||
const StyledEventFieldDiffValue = styled.div`
|
const StyledEventFieldDiffValue = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const EventFieldDiffValue = ({
|
export const EventFieldDiffValue = ({
|
||||||
|
@ -13,6 +13,7 @@ import { isDefined } from '~/utils/isDefined';
|
|||||||
const StyledEventCardMessageContainer = styled.div`
|
const StyledEventCardMessageContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 380px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledEmailContent = styled.div`
|
const StyledEmailContent = styled.div`
|
||||||
@ -31,18 +32,21 @@ const StyledEmailTop = styled.div`
|
|||||||
const StyledEmailTitle = styled.div`
|
const StyledEmailTitle = styled.div`
|
||||||
color: ${({ theme }) => theme.font.color.primary};
|
color: ${({ theme }) => theme.font.color.primary};
|
||||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledEmailParticipants = styled.div`
|
const StyledEmailParticipants = styled.div`
|
||||||
color: ${({ theme }) => theme.font.color.tertiary};
|
color: ${({ theme }) => theme.font.color.tertiary};
|
||||||
display: flex;
|
|
||||||
font-size: ${({ theme }) => theme.font.size.sm};
|
font-size: ${({ theme }) => theme.font.size.sm};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledEmailBody = styled.div`
|
const StyledEmailBody = styled.div`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const EventCardMessage = ({
|
export const EventCardMessage = ({
|
||||||
@ -103,15 +107,14 @@ export const EventCardMessage = ({
|
|||||||
|
|
||||||
const messageParticipantHandles = message.messageParticipants
|
const messageParticipantHandles = message.messageParticipants
|
||||||
.map((participant) => participant.handle)
|
.map((participant) => participant.handle)
|
||||||
|
.filter((handle) => isDefined(handle) && handle !== '')
|
||||||
.join(', ');
|
.join(', ');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledEventCardMessageContainer>
|
<StyledEventCardMessageContainer>
|
||||||
<StyledEmailContent>
|
<StyledEmailContent>
|
||||||
<StyledEmailTop>
|
<StyledEmailTop>
|
||||||
<StyledEmailTitle>
|
<StyledEmailTitle>{message.subject}</StyledEmailTitle>
|
||||||
<div>{message.subject}</div>
|
|
||||||
</StyledEmailTitle>
|
|
||||||
<StyledEmailParticipants>
|
<StyledEmailParticipants>
|
||||||
<OverflowingTextWithTooltip text={messageParticipantHandles} />
|
<OverflowingTextWithTooltip text={messageParticipantHandles} />
|
||||||
</StyledEmailParticipants>
|
</StyledEmailParticipants>
|
||||||
|
Loading…
Reference in New Issue
Block a user