From e627cc51fd65f65a91a7ee4a76cb74f1d73a6099 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 6 Mar 2023 17:44:31 +0100
Subject: [PATCH] max-height for description + scroll bar, removing description
 icon (#7535)

* max-height for description, scroll

* added nicer scrollbar

* removing info icon for more description space
---
 apps/web/components/booking/BookingDescription.tsx | 12 ++----------
 apps/web/styles/globals.css                        |  7 +++++++
 packages/ui/components/form/select/components.tsx  |  5 +----
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 37c33c7093..2df26dac79 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
+import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -94,15 +94,7 @@ const BookingDescription: FC<Props> = (props) => {
               "flex",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
-            <div>
-              <FiInfo
-                className={classNames(
-                  "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
-                  isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
-                )}
-              />
-            </div>
-            <div className="max-w-[calc(100%_-_2rem)] flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
+            <div className="scroll-bar scrollbar-track-w-20 max-h-[200px] max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
               <EventTypeDescriptionSafeHTML eventType={eventType} />
             </div>
           </div>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index cd0ed081fa..870aefe1f8 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -152,6 +152,13 @@ select:focus {
 input[type='text']:focus { box-shadow: none; }
 
 
+@layer components {
+  .scroll-bar{
+    @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent
+  }
+}
+
+
 button[role="switch"][data-state="checked"] {
   @apply bg-gray-900;
 }
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index a50bc43c5c..3d459894e9 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -163,9 +163,6 @@ export const MenuListComponent = <
 }: MenuListProps<Option, IsMulti, Group>) => (
   <reactSelectComponents.MenuList
     {...props}
-    className={classNames(
-      "scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-track-w-[80px] rounded-md",
-      className
-    )}
+    className={classNames("scroll-bar scrollbar-track-w-20 rounded-md", className)}
   />
 );