fix: event-title-overflow (calcom#24693)

* fix: event-title-overflow

* fix: title overflow in multiple components

* fix: title overflow in readonly component

Author: akshatbajetha

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}

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>

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>

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>
   );