From 959b803d84181562f0b6c9fc8aa3ea487b3cf820 Mon Sep 17 00:00:00 2001
From: Akshat Bajetha <69810946+akshatbajetha@users.noreply.github.com>
Date: Sun, 26 Oct 2025 17:44:21 +0530
Subject: [PATCH] fix: event-title-overflow (#24693)

* fix: event-title-overflow

* fix: title overflow in multiple components

* fix: title overflow in readonly component
---
 apps/web/components/booking/BookingListItem.tsx               | 2 +-
 apps/web/modules/bookings/views/bookings-single-view.tsx      | 2 +-
 .../modules/event-types/views/event-types-listing-view.tsx    | 4 ++--
 packages/features/bookings/components/event-meta/Title.tsx    | 4 +++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 72ae646473..7b6bdec932 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -623,7 +623,7 @@ function BookingListItem(booking: BookingItemProps) {
                 <div
                   title={title}
                   className={classNames(
-                    "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
+                    "max-w-10/12 sm:max-w-56 text-emphasis break-words text-sm font-medium leading-6 md:max-w-full",
                     isCancelled ? "line-through" : ""
                   )}>
                   {title}
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 12444cc4ba..c11ee70a1d 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -577,7 +577,7 @@ export default function Success(props: PageProps) {
                           </>
                         )}
                         <div className="font-medium">{t("what")}</div>
-                        <div className="col-span-2 mb-6 last:mb-0" data-testid="booking-title">
+                        <div className="col-span-2 mb-6 break-words last:mb-0" data-testid="booking-title">
                           {isRoundRobin ? bookingInfo.title : eventName}
                         </div>
                         <div className="font-medium">{t("when")}</div>
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 029365fb17..1897dc6b5a 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -178,7 +178,7 @@ const Item = ({
   const content = () => (
     <div>
       <span
-        className="text-default font-semibold ltr:mr-1 rtl:ml-1"
+        className="text-default break-words font-semibold ltr:mr-1 rtl:ml-1"
         data-testid={`event-type-title-${type.id}`}>
         {type.title}
       </span>
@@ -212,7 +212,7 @@ const Item = ({
           <Link href={`/event-types/${type.id}?tabName=setup`} title={type.title}>
             <div>
               <span
-                className="text-default font-semibold ltr:mr-1 rtl:ml-1"
+                className="text-default break-words font-semibold ltr:mr-1 rtl:ml-1"
                 data-testid={`event-type-title-${type.id}`}>
                 {type.title}
               </span>
diff --git a/packages/features/bookings/components/event-meta/Title.tsx b/packages/features/bookings/components/event-meta/Title.tsx
index f41db8f646..53fd27630d 100644
--- a/packages/features/bookings/components/event-meta/Title.tsx
+++ b/packages/features/bookings/components/event-meta/Title.tsx
@@ -12,7 +12,9 @@ interface EventTitleProps {
 export const EventTitle = ({ children, as, className }: EventTitleProps) => {
   const El = as || "h1";
   return (
-    <El data-testid="event-title" className={classNames("text-text text-xl font-semibold", className)}>
+    <El
+      data-testid="event-title"
+      className={classNames("text-text break-words text-xl font-semibold", className)}>
       {children}
     </El>
   );