e3e638579b
FIX: #6977 Implementation: 1. Parent (Summary componenet) width is set to 100%. (dosen't grow even if the child exceeds width) 2. span element is set to `text-overflow: ellipses` when overflown. --------- Co-authored-by: Félix Malfait <felix@twenty.com>
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
|
|
|
|
type EventCardProps = {
|
|
children: React.ReactNode;
|
|
isOpen: boolean;
|
|
};
|
|
|
|
const StyledCardContainer = styled.div`
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
width: 400px;
|
|
padding: ${({ theme }) => theme.spacing(2)} 0px
|
|
${({ theme }) => theme.spacing(1)} 0px;
|
|
|
|
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
|
width: 300px;
|
|
}
|
|
`;
|
|
|
|
const StyledCard = styled(Card)`
|
|
background: ${({ theme }) => theme.background.secondary};
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
|
|
display: flex;
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
`;
|
|
|
|
export const EventCard = ({ children, isOpen }: EventCardProps) => {
|
|
return (
|
|
isOpen && (
|
|
<StyledCardContainer>
|
|
<StyledCard fullWidth>{children}</StyledCard>
|
|
</StyledCardContainer>
|
|
)
|
|
);
|
|
};
|