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
calcom · Mar 6, 2023 · e627cc5 · e627cc5 · vercel · Mar 6, 2023
1 parent b349def
commit e627cc5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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)}
  />
 );