From 9d1e6f23dbabe4a22b4de69e4adc88f803711871 Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Fri, 3 Jun 2022 08:15:29 -0300
Subject: [PATCH] Fixing spaces and wraps for event type legend (#2941)

* Fixing spaces and wraps

* Spacing wrapped items

* fix lint errors

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---
 .../eventtype/EventTypeDescription.tsx        | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/eventtype/EventTypeDescription.tsx b/apps/web/components/eventtype/EventTypeDescription.tsx
index 009a34b7c4..8f0e7aab66 100644
--- a/apps/web/components/eventtype/EventTypeDescription.tsx
+++ b/apps/web/components/eventtype/EventTypeDescription.tsx
@@ -38,39 +38,42 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
 
   return (
     <>
-      <div className={classNames("text-neutral-500 dark:text-white", className)}>
+      <div
+        className={classNames("flex flex-wrap text-neutral-500 dark:text-white sm:flex-nowrap", className)}>
         {eventType.description && (
           <h2 className="max-w-[280px] overflow-hidden text-ellipsis opacity-60 sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
-          <li className="flex whitespace-nowrap">
-            <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
+          <li className="mr-4 flex items-center whitespace-nowrap">
+            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
             {eventType.length}m
           </li>
           {eventType.schedulingType ? (
-            <li className="flex whitespace-nowrap">
-              <UsersIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="flex whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
+        </ul>
+        <ul className="mt-2 flex">
           {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="flex whitespace-nowrap">
-              <RefreshIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("repeats_up_to", { count: recurringEvent.count })}
             </li>
           )}
           {eventType.price > 0 && (
-            <li className="flex whitespace-nowrap">
-              <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}