cal.com icon indicating copy to clipboard operation
cal.com copied to clipboard

(bug) An event description should have the scrollbar visible if the content overflows

Open cassidoo opened this issue 1 year ago • 4 comments

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

  1. (for example) Go to https://cal.com/c/review-my-dev-tool
  2. Look at the description of the event on the left
  3. Scroll in it

Expected behavior

The scrollbar should be visible.

Other information

No response

Screenshots

What you see:

image

What you should see:

image

Environment

  • [X] app.cal.com
  • [ ] Self-hosted Cal

Desktop (please complete the following information)

- OS: MacOS
- Browser: Edge
- npm: N/A

cassidoo avatar Aug 19 '24 04:08 cassidoo

@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. image

So we need to make changes specific to the description box so it will not affect at other places

arpitmishra61 avatar Aug 19 '24 19:08 arpitmishra61

@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!

cassidoo avatar Aug 19 '24 20:08 cassidoo

Hello Mam @cassidoo , Mam may I try as This will be my First contribution

sameersuman573 avatar Aug 20 '24 17:08 sameersuman573

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 avatar Oct 15 '24 09:10 nta-telmore

@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

anikdhabal avatar Oct 15 '24 09:10 anikdhabal

Closing this issue as its fixed.

Devanshusharma2005 avatar Jul 30 '25 06:07 Devanshusharma2005