fix: Fix custom scrollbar in Calendar description

[Benny-intoleads]

What does this PR do?

• Adds custom scrollbar styling for the EventMetaBlock component.

• Implements max-h-[180px] and overflow-y-auto to ensure the scrollbar appears only when content exceeds 180px.

• Adds global styles for custom WebKit scrollbars in globals.css.

• Fixes the issue where the scrollbar was not visible when content overflowed.

• Fixes Calendar description does not have visible scrollbar to indicate more content #16757 (GitHub issue number)

• Fixes CAL-Calendar description does not have visible scrollbar to indicate more content #16757(Linear issue number - should be visible at the bottom of the GitHub issue description)

Loom Video:https://www.loom.com/share/35dbe5e6c5094b4bb0019378883c282e?sid=64a8bcaa-42d0-4810-ba79-3941d41cbbbd

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have added a Docs issue here if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Steps to Reproduce

1. Pull the latest code from the branch containing the changes.
2. Go to one of the event types
3. Add some description that has more than 5-10 bullet points
4. Save and open the preview link.

Verify scrollbar appearance:

1. The scrollbar should only appear when the content height exceeds 180px.
2. The scrollbar should be positioned on the right side of the container.
3. Check the appearance of the scrollbar (it should match the styles defined in the globals.css file).

• Are there environment variables that should be set?

• No environment variables are required to test this PR. It relies on frontend styling, so no backend or environment-specific configurations are needed.

• What are the minimal test data to have?

• Minimal test data:
  A block of text or HTML content that exceeds 180px in height is necessary to trigger the scrollbar.

• What is expected (happy path) to have (input and output)?

• Input: A container with content that exceeds 180px in height, triggering the scrollbar.
  Expected output (happy path):
  The scrollbar appears on the right side of the container.
  The scrollbar track is styled as defined (light border, rounded corners).
  The scrollbar thumb is styled with a default color (rgb(231, 232, 229)).
  On hover, the scrollbar thumb changes color (#88ba1c).
  The scrollbar should be smooth, functional, and should only appear when the content exceeds the defined height limit.

• Any other important info that could help to test that PR
  -Responsive behaviour: Ensure that the component behaves correctly on various screen sizes. The max-h-[180px] class should work across devices.
  -Cross-browser testing: While the custom scrollbar styles are primarily for WebKit-based browsers, testers should also
  -check how the component looks in Firefox to ensure the native scrollbar does not break the layout.
  Edge cases:
  -Test with content that is exactly 180px in height to ensure the scrollbar does not appear.
  -Test with content significantly larger than 180px to ensure the scrollbar behaves correctly without overlapping or layout
  issues.
  -Test hover behaviour and confirm that the thumb colour change on the hover is smooth and works as expected.

Checklist

• I have read and understood the contributing guide
• My code follows the style guidelines of this project.
• I haven't commented my code, particularly in hard-to-understand areas
• I have ensured that my changes generate no new warnings.
• I have tested the code and confirmed that it works as expected across supported environments and browsers.

[vercel]

@Benny-intoleads is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title " fix: Calendar description scrollbar". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[graphite-app]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (09/24/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (09/24/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (09/24/24)

1 label was added to this PR based on Keith Williams's automation.

[anikdhabal]

Why this change? Not needed

[anikdhabal]

@Benny-intoleads pls uncommit the lock file

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[anikdhabal]

@Benny-intoleads sorry, but it's fine now. Tested it