(bug) An event description should have the scrollbar visible if the content overflows
Issue Summary
Right now, if you have an event description that is above ~9 lines of text in the event box, the text overflows. It is a scrollable container, but that is not obvious to the user, and it looks like it's just missing the ending of a sentence. The scrollbar should be visible for scrollable content like this, both for usability and for accessibility.
Steps to Reproduce
- (for example) Go to https://cal.com/c/review-my-dev-tool
- Look at the description of the event on the left
- Scroll in it
Expected behavior
The scrollbar should be visible.
Other information
No response
Screenshots
What you see:
What you should see:
Environment
- [X] app.cal.com
- [ ] Self-hosted Cal
Desktop (please complete the following information)
- OS: MacOS
- Browser: Edge
- npm: N/A
@cassidoo This is the native behavior of browsers. Maybe there is a hack that we can do with CSS.
if you notice, the global scroll bar for the entire page is also not visible on mobile devices only when you scroll it will be visible.
So we need to make changes specific to the description box so it will not affect at other places
@arpitmishra61 yeah, for sure. For example, this isn't a problem on Windows. I think it's a bad design decision on Apple's part, but it's worth fixing!
Hello Mam @cassidoo , Mam may I try as This will be my First contribution
Hello @cassidoo , this issue reported by me as a Cal user on #16757 but for some reason they closed it as they could not reproduce... I am developer myself and would love to take care of this issue. Will be more than happy to help.
The solution is to create a nice fade effect at the end of the paragraph with Tailwind classes, so users know that the text continues. Does that make sense?
You can assign this task to me, as I know an immediate solution. Thanks!
@nta-telmore We don't assign issues. Feel free to open a PR, as you mentioned that you have an immediate solution. Let's see
Closing this issue as its fixed.