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.

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

fix: Missing ellipsis for long calendar event names #8528

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

asadath1395
Copy link

Fixes #5267

Copy link

github-actions bot commented Nov 16, 2024

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 0d28233

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

PR Summary

Implemented text truncation with ellipsis for long calendar event names to prevent overflow issues in the calendar view.

  • Added overflow: hidden and removed flex: 1 0 auto in StyledEvents component in /packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
  • Added text-overflow: ellipsis and overflow: hidden to StyledTitle in /packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
  • Set flex-shrink: 0 on fixed-width elements to prevent unwanted shrinking in CalendarEventRow
  • Added proper overflow handling in StyledLabels component to maintain layout integrity

2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines 39 to 46
const StyledEvents = styled.div`
align-items: stretch;
display: flex;
flex: 1 0 auto;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
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.

logic: Adding overflow:hidden alone won't create text ellipsis. The child components need width constraints and text-overflow properties.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Missing ellipsis for long calendar event names
3 participants