From 3206e4ea12305e7fb830f2f3cbba45eb987968dc Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Fri, 24 Feb 2023 03:31:09 +0530
Subject: [PATCH] fix: remove scroll (#7312)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 .../bookings/components/EventTypeFilter.tsx   |  3 ++-
 .../ui/components/popover/AnimatedPopover.tsx | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/features/bookings/components/EventTypeFilter.tsx b/packages/features/bookings/components/EventTypeFilter.tsx
index 5a46284e10..741abf757b 100644
--- a/packages/features/bookings/components/EventTypeFilter.tsx
+++ b/packages/features/bookings/components/EventTypeFilter.tsx
@@ -2,7 +2,8 @@ import { useSession } from "next-auth/react";
 import { Fragment, useState, useEffect } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc, RouterOutputs } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover } from "@calcom/ui";
 
 import { groupBy } from "../groupBy";
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index 25e5dcd20c..079ea56749 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -2,6 +2,7 @@ import * as Popover from "@radix-ui/react-popover";
 import React from "react";
 
 import { classNames } from "@calcom/lib";
+import { Tooltip } from "@calcom/ui";
 
 import { FiChevronDown } from "../icon";
 
@@ -43,18 +44,20 @@ export const AnimatedPopover = ({
       <Popover.Trigger asChild>
         <div
           ref={ref}
-          className="item-center  mb-2 flex h-9 max-h-72 justify-between overflow-y-scroll whitespace-nowrap rounded-md border border-gray-300
+          className="mb-2 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border border-gray-300
           py-2 px-3 text-sm placeholder:text-gray-400
           hover:cursor-pointer hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
           <div className="max-w-36 flex items-center">
-            <div className="truncate">
-              {text}
-              {count && count > 0 && (
-                <div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
-              )}
-            </div>
+            <Tooltip content={text}>
+              <div className="truncate">
+                {text}
+                {count && count > 0 && (
+                  <div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
+                )}
+              </div>
+            </Tooltip>
             <FiChevronDown
-              className={classNames("mt-auto ml-2 transition-transform duration-150", open && "rotate-180")}
+              className={classNames("ml-2 transition-transform duration-150", open && "rotate-180")}
             />
           </div>
         </div>