From 889b3f36ae1aa6cba3fe7e4afc7736fc57f573a2 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Fri, 24 Sep 2021 18:03:09 +0100
Subject: [PATCH] fixed mobile booking layout for long descriptions

---
 components/eventtype/EventTypeDescription.tsx | 86 +++++++++----------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/components/eventtype/EventTypeDescription.tsx b/components/eventtype/EventTypeDescription.tsx
index 86d5b8b5..87069ec4 100644
--- a/components/eventtype/EventTypeDescription.tsx
+++ b/components/eventtype/EventTypeDescription.tsx
@@ -1,10 +1,4 @@
-import {
-  ClockIcon,
-  CreditCardIcon,
-  InformationCircleIcon,
-  UserIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
+import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
 import { Prisma } from "@prisma/client";
 import React from "react";
@@ -32,47 +26,45 @@ export type EventTypeDescriptionProps = {
 
 export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
   return (
-    <ul className={classNames("mt-2 space-x-4 text-neutral-500 dark:text-white flex", className)}>
-      <li className="flex whitespace-nowrap">
-        <ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
-        {eventType.length}m
-      </li>
-      {eventType.schedulingType ? (
-        <li className="hidden sm:flex whitespace-nowrap">
-          <UsersIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
-          {eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"}
-          {eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"}
-        </li>
-      ) : (
-        <li className="hidden sm:flex whitespace-nowrap">
-          <UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
-          1-on-1
-        </li>
-      )}
-      {eventType.price > 0 && (
-        <li className="flex whitespace-nowrap">
-          <CreditCardIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
-          <IntlProvider locale="en">
-            <FormattedNumber
-              value={eventType.price / 100.0}
-              style="currency"
-              currency={eventType.currency.toUpperCase()}
-            />
-          </IntlProvider>
-        </li>
-      )}
-      {eventType.description && (
-        <li className="flex">
-          <InformationCircleIcon
-            className="flex-none inline mr-1.5 mt-0.5 h-4 w-4 text-neutral-400"
-            aria-hidden="true"
-          />
-          <span className="truncate max-w-[200px] sm:max-w-full">
+    <>
+      <div className={classNames("text-neutral-500 dark:text-white", className)}>
+        {eventType.description && (
+          <h2 className="opacity-60 truncate max-w-[280px] sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}
-          </span>
-        </li>
-      )}
-    </ul>
+          </h2>
+        )}
+        <ul className="flex mt-2 space-x-4 ">
+          <li className="flex whitespace-nowrap">
+            <ClockIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+            {eventType.length}m
+          </li>
+          {eventType.schedulingType ? (
+            <li className="flex whitespace-nowrap">
+              <UsersIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {eventType.schedulingType === SchedulingType.ROUND_ROBIN && "Round Robin"}
+              {eventType.schedulingType === SchedulingType.COLLECTIVE && "Collective"}
+            </li>
+          ) : (
+            <li className="flex whitespace-nowrap">
+              <UserIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              1-on-1
+            </li>
+          )}
+          {eventType.price > 0 && (
+            <li className="flex whitespace-nowrap">
+              <CreditCardIcon className="inline mt-0.5 mr-1.5 h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <IntlProvider locale="en">
+                <FormattedNumber
+                  value={eventType.price / 100.0}
+                  style="currency"
+                  currency={eventType.currency.toUpperCase()}
+                />
+              </IntlProvider>
+            </li>
+          )}
+        </ul>
+      </div>
+    </>
   );
 };