It looks like the overflow issue on the Event page you're experiencing could be due to the CSS classes controlling overflow behavior, specifically overflow-y-auto and overflow-hidden. These classes might be causing content to overflow or be hidden inappropriately, especially when combined with layout styles like flex and whitespace-nowrap.

To address this, you might want to consider the following adjustments:

1. Remove overflow-y-auto from the eventClasses definition: This class allows vertical scrolling within the event elements, which might not be necessary and could contribute to layout issues.

2. Review and potentially adjust the use of overflow-hidden and whitespace-nowrap: If the content is overflowing and causing layout issues, consider allowing the text to wrap or providing more space for the content to expand.

Here's a code snippet suggestion for your Event.tsx component:

const eventClasses = cva(
  "group flex h-full w-full rounded-[6px] px-[6px] text-xs font-semibold leading-5 opacity-80",
  {
    // Your variants here
  }
);

<div
  className="flex w-full gap-2 overflow-visible text-left leading-4">
  <span>{event.title}</span>
  // Additional content here
</div>

In this adjustment, I've suggested removing overflow-y-auto and changing overflow-hidden and whitespace-nowrap to overflow-visible in the inner div to allow content to expand as needed without being cut off. This should help address the overflow issue without blocking content below the event section on the page.

To continue the conversation, mention @dosu.

I would like to work on this issue @dosu

you are right, we need to have more padding at the top for smaller devices in height. adding to roadmap for this month