From 67ef662e3eb011906879fe178479a22f72165cba Mon Sep 17 00:00:00 2001
From: zmeyer44 <zmmeyer44@gmail.com>
Date: Wed, 1 Nov 2023 20:46:07 -0400
Subject: [PATCH] fixing card overflow

---
 components/Cards/CalendarEvent/LargeFeedCard.tsx | 6 +++---
 containers/EventsTimeline/CalendarSection.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Cards/CalendarEvent/LargeFeedCard.tsx b/components/Cards/CalendarEvent/LargeFeedCard.tsx
index 025f6c7..6c44d6f 100644
--- a/components/Cards/CalendarEvent/LargeFeedCard.tsx
+++ b/components/Cards/CalendarEvent/LargeFeedCard.tsx
@@ -46,13 +46,13 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
     : null;
 
   return (
-    <Card className="relative flex justify-between gap-x-4 rounded-[1rem] bg-muted p-[0.5rem]">
+    <Card className="relative flex justify-between gap-x-4 overflow-hidden rounded-[1rem] bg-muted p-[0.5rem]">
       <CardHeader className="w-3/5 justify-between p-0 pr-5">
         <div className="">
           <div className="flex">
             <SmallProfileLine pubkey={pubkey} />
           </div>
-          <div className="pl-3">
+          <div className="overflow-hidden pl-3">
             <CardTitle className="mt-3 line-clamp-2 text-xl leading-6">
               {getTagValues("name", tags)}
             </CardTitle>
@@ -61,7 +61,7 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
             </CardDescription>
           </div>
         </div>
-        <div className="flex items-center gap-x-4 pl-2">
+        <div className="flex flex-wrap items-center gap-x-4 overflow-hidden pl-2">
           {!!users.length && (
             <div className="flex shrink-0 items-center gap-x-1.5">
               <HiOutlineUserCircle className="h-4 w-4 text-primary" />
diff --git a/containers/EventsTimeline/CalendarSection.tsx b/containers/EventsTimeline/CalendarSection.tsx
index 46986dc..089c38b 100644
--- a/containers/EventsTimeline/CalendarSection.tsx
+++ b/containers/EventsTimeline/CalendarSection.tsx
@@ -28,7 +28,7 @@ export default function CalendarSection({ events }: CalendarSectionProps) {
   const startDate = fromUnix(parseInt(startDateUnix));
 
   return (
-    <div className="relative flex w-full items-start gap-x-3 @container">
+    <div className="relative flex w-full max-w-full items-start gap-x-3 @container">
       {/* Date Indicator */}
       <div className="sticky top-[calc(var(--header-height)_+_28px)] hidden w-[230px] shrink-0 md:block">
         <CalendarIcon date={startDate} />
@@ -41,7 +41,7 @@ export default function CalendarSection({ events }: CalendarSectionProps) {
       </div>
 
       {/* Events */}
-      <div className="flex-1 space-y-4 max-md:pt-[60px]">
+      <div className="max-w-full flex-1 space-y-4 overflow-x-hidden max-md:pt-[60px]">
         {events.map((e) => (
           <LargeFeedCard key={e.id} event={e} />
         ))}