Excessive Button Size and Untruncated Text in Event Display/Layout Distortion

[skbhagat0502]

Describe the bug
When entering a long title and description for an event, the button that displays the events becomes excessively large, stretching the layout. Additionally, on the events description page, long titles and descriptions are not truncated on the left side, leading to a visually unappealing and distorted page appearance.

To Reproduce
Steps to reproduce the behavior:

1. Create an event with a long title and description.
2. View the events page and observe the size of the button containing the event.
3. Navigate to the events description page and note the display of long titles and descriptions on the left side.

Expected behavior
The layout should handle long titles and descriptions appropriately, truncating them if necessary, to maintain a visually pleasing and consistent design.

Actual behavior
The button displaying events becomes excessively large when containing a long title, and on the events description page, long titles and descriptions are not truncated on the left side, affecting the overall page appearance.

Screenshots

2023-11-01.01-43-16.mp4

Additional details
Add any other context or screenshots about the feature request here.

[skbhagat0502]

@palisadoes Please assign me this issue.

[skbhagat0502]

@palisadoes what do you think about adding a drop down for choosing location like choosing country and then choosing state.If you think that this should be implement then I would like to work on this also after fixing this bug.

[duplixx]

@palisadoes Please assign me this issue if no one is working on it.

[palisadoes]

Please focus on the truncated text. How do you propose people will be able to see the entire event name when truncated?

[skbhagat0502]

@palisadoes, The current limit of the characters for naming the event is 256 characters which I think is too much. This can be lowered down to 100 to 150 characters. Also my solution will be like, users will see a truncated text in the event title which will be max of two lines means of about 70 characters. When the user will hover over the event title then it will be show as a floating text just over the cursor in which the full title of the event will be shown.
Here is the example

When the user hovers over the icon then the text orders (as shown in the image) is shown. Just like that when the user will hover over the truncated text then the user will see the full title of the event.

The another solution will be like, users will see the truncated text of about 60 to 70 characters. When the user will hover over the title then it will be zoomed in and the full title will be shown without disturbing the overall layout. If you have any other solution in your mind then please tell me.

[palisadoes]

The solution to viewing the entire title must not alter the layout. So would that be the second option?

[skbhagat0502]

@palisadoes, Both solutions ensure that the layout remains unaffected. I believe the second option, with the zoom-in on hover, aligns well with the requirement. It provides a seamless way for users to view the entire title without impacting the overall layout. I'm inclined towards the second option. Let me know if you have any additional considerations or preferences.

[palisadoes]

OK, go with option 2.

@Ayush0Chaudhary will be managing this issue and the PR you create.

[skbhagat0502]

ok @palisadoes . @Ayush0Chaudhary Please assign this to me.

[skbhagat0502]

@Ayush0Chaudhary I have a made a pull request but one of the component has some lines not covered with test. Don't know why but locally, I can't see the issue. Can you please guide me what I am missing.

[Ayush0Chaudhary]

Share test coverage screenshot

[skbhagat0502]

@Ayush0Chaudhary , it was my mistake. I was looking at the incorrect test score.Now I have fixed it.