fix: text overflow (#5080)

Co-authored-by: Alan <alannnc@gmail.com>

apps/web/components/booking/AvailableEventLocations.tsx

@@ -5,7 +5,6 @@ import { Props } from "./pages/AvailabilityPage";
 
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   return locations.length ? (
-    <div>
     <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-2 break-words text-sm text-gray-600">
       {locations.map((location) => {
         const eventLocationType = getEventLocationType(location.type);
@@ -23,12 +22,14 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
               )}
               alt={`${eventLocationType.label} icon`}
             />
-              <span key={location.type}>{locationKeyToString(location)} </span>
+
+            <span className="max-w-full pr-4" key={location.type}>
+              {locationKeyToString(location)}
+            </span>
           </div>
         );
       })}
     </div>
-    </div>
   ) : (
     <></>
   );