From 02e3738a17a015f858a87be20b5f759d9111e103 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Tue, 15 Nov 2022 09:36:20 +0100
Subject: [PATCH] Improved event description truncation (actually removed it
 mostly) (#5374)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/pages/event-types/index.tsx                 | 12 ++++++------
 apps/web/playwright/event-types.e2e.ts               |  8 ++++----
 apps/web/playwright/hash-my-url.e2e.ts               |  4 ++--
 .../v2/modules/event-types/EventTypeDescription.tsx  |  8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index b5ed1c8810..5352f0cb9c 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -56,11 +56,11 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
   return (
     <Link href={`/event-types/${type.id}?tabName=setup`}>
       <a
-        className="flex-grow truncate text-sm"
+        className="overflow-hidden pr-4 text-sm"
         title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
         <div>
           <span
-            className="truncate font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
+            className="font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
             data-testid={"event-type-title-" + type.id}>
             {type.title}
           </span>
@@ -252,8 +252,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
           const calLink = `${CAL_URL}/${embedLink}`;
           return (
             <li key={type.id}>
-              <div className="flex items-center justify-between hover:bg-neutral-50">
-                <div className="group flex w-full items-center justify-between px-4 py-4 pr-0 sm:px-6">
+              <div className="flex w-full items-center justify-between hover:bg-neutral-50">
+                <div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
                   {!(firstItem && firstItem.id === type.id) && (
                     <button
                       className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
@@ -270,7 +270,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </button>
                   )}
                   <MemoizedItem type={type} group={group} readOnly={readOnly} />
-                  <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
+                  <div className="mt-4 hidden sm:mt-0 sm:flex">
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       {type.users?.length > 1 && (
                         <AvatarGroup
@@ -391,7 +391,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </div>
                   </div>
                 </div>
-                <div className="mr-5 flex flex-shrink-0 sm:hidden">
+                <div className="min-w-9 mr-5 flex sm:hidden">
                   <Dropdown>
                     <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
                       <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
diff --git a/apps/web/playwright/event-types.e2e.ts b/apps/web/playwright/event-types.e2e.ts
index 341797ed0d..443d0fef39 100644
--- a/apps/web/playwright/event-types.e2e.ts
+++ b/apps/web/playwright/event-types.e2e.ts
@@ -22,7 +22,7 @@ test.describe("Event Types tests", () => {
     });
 
     test("has at least 2 events", async ({ page }) => {
-      const $eventTypes = page.locator("[data-testid=event-types] > *");
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const count = await $eventTypes.count();
       expect(count).toBeGreaterThanOrEqual(2);
     });
@@ -110,7 +110,7 @@ test.describe("Event Types tests", () => {
       expect(formSlug).toBe(firstSlug);
     });
     test("edit first event", async ({ page }) => {
-      const $eventTypes = page.locator("[data-testid=event-types] > *");
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const firstEventTypeElement = $eventTypes.first();
       await firstEventTypeElement.click();
       await page.waitForNavigation({
@@ -134,13 +134,13 @@ test.describe("Event Types tests", () => {
     });
 
     test("has at least 2 events where first is enabled", async ({ page }) => {
-      const $eventTypes = page.locator("[data-testid=event-types] > *");
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const count = await $eventTypes.count();
       expect(count).toBeGreaterThanOrEqual(2);
     });
 
     test("edit first event", async ({ page }) => {
-      const $eventTypes = page.locator("[data-testid=event-types] > *");
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const firstEventTypeElement = $eventTypes.first();
       await firstEventTypeElement.click();
       await page.waitForNavigation({
diff --git a/apps/web/playwright/hash-my-url.e2e.ts b/apps/web/playwright/hash-my-url.e2e.ts
index 3502ae25ef..794138ffc5 100644
--- a/apps/web/playwright/hash-my-url.e2e.ts
+++ b/apps/web/playwright/hash-my-url.e2e.ts
@@ -18,7 +18,7 @@ test.describe("hash my url", () => {
     await page.goto("/event-types");
     // We wait until loading is finished
     await page.waitForSelector('[data-testid="event-types"]');
-    await page.locator('//ul[@data-testid="event-types"]/li[1]').click();
+    await page.locator("ul[data-testid=event-types] > li a").first().click();
     // We wait for the page to load
     await page.locator(".primary-navigation >> text=Advanced").click();
     // ignore if it is already checked, and click if unchecked
@@ -45,7 +45,7 @@ test.describe("hash my url", () => {
     await page.goto("/event-types");
     // We wait until loading is finished
     await page.waitForSelector('[data-testid="event-types"]');
-    await page.click('//ul[@data-testid="event-types"]/li[1]');
+    await page.locator("ul[data-testid=event-types] > li a").first().click();
     // We wait for the page to load
     await page.locator(".primary-navigation >> text=Advanced").click();
     // we wait for the hashedLink setting to load
diff --git a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
index 326c89bcfe..01aefdcdd3 100644
--- a/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
+++ b/packages/ui/v2/modules/event-types/EventTypeDescription.tsx
@@ -35,10 +35,10 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
     <>
       <div className={classNames("dark:text-darkgray-800 text-neutral-500", className)}>
         {eventType.description && (
-          <h2 className="dark:text-darkgray-800 max-w-[200px] overflow-hidden text-ellipsis py-2 text-sm text-gray-600 opacity-60 sm:max-w-[500px]">
-            {eventType.description.substring(0, 100)}
-            {eventType.description.length > 100 && "..."}
-          </h2>
+          <p className="dark:text-darkgray-800 max-w-[280px] break-words py-2 text-sm text-gray-600 opacity-60 sm:max-w-[500px]">
+            {eventType.description.substring(0, 300)}
+            {eventType.description.length > 300 && "..."}
+          </p>
         )}
         <ul className="mt-2 flex flex-wrap space-x-2 sm:flex-nowrap">
           <li>