From 7b0d4f0f7867da9f429fdbc35e942c5e84e54797 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 5 Sep 2022 12:49:20 +0200
Subject: [PATCH] #4133 fixed tooltip positioning (#4136)

* fixed tooltip positioning

* fixed right side tooltip and z-index

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/pages/v2/event-types/index.tsx | 26 +++++++++++++------------
 packages/ui/v2/core/Tooltip.tsx         |  8 +++++++-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx
index 568cbf10c1..cc7ed08bd4 100644
--- a/apps/web/pages/v2/event-types/index.tsx
+++ b/apps/web/pages/v2/event-types/index.tsx
@@ -232,7 +232,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
   const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]);
 
   return (
-    <div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
+    <div className="flex mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
       <ul className="w-full divide-y divide-neutral-200" data-testid="event-types">
         {types.map((type, index) => {
           const embedLink = `${group.profile.slug}/${type.slug}`;
@@ -249,7 +249,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 )}>
                 <div
                   className={classNames(
-                    "group flex w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
+                    "flex group w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
                     type.$disabled && "hover:bg-white"
                   )}>
                   {types.length > 1 && !type.$disabled && (
@@ -294,14 +294,16 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           type.$disabled && "pointer-events-none cursor-not-allowed"
                         )}>
                         <Tooltip content={t("show_eventtype_on_profile") as string}>
-                          <div className="self-center border-r-2 border-gray-300 pr-4">
-                            <Switch
-                              name="Hidden"
-                              checked={!type.hidden}
-                              onCheckedChange={() => {
-                                setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
-                              }}
-                            />
+                          <div className="py-4">
+                            <div className="-my-2 self-center border-r-2 border-gray-300 pr-4">
+                              <Switch
+                                name="Hidden"
+                                checked={!type.hidden}
+                                onCheckedChange={() => {
+                                  setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
+                                }}
+                              />
+                            </div>
                           </div>
                         </Tooltip>
                         <Tooltip content={t("preview") as string}>
@@ -388,7 +390,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </div>
                   </div>
                 </div>
-                <div className="mr-5 flex flex-shrink-0 sm:hidden">
+                <div className="flex mr-5 flex-shrink-0 sm:hidden">
                   <Dropdown>
                     <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
                       <Button
@@ -511,7 +513,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => {
   console.log(profile.slug);
   return (
-    <div className="mb-4 flex">
+    <div className="flex mb-4">
       <Link href="/settings/teams">
         <a>
           <Avatar
diff --git a/packages/ui/v2/core/Tooltip.tsx b/packages/ui/v2/core/Tooltip.tsx
index 6ae1dd850d..254126199d 100644
--- a/packages/ui/v2/core/Tooltip.tsx
+++ b/packages/ui/v2/core/Tooltip.tsx
@@ -1,6 +1,8 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import React from "react";
 
+import { classNames } from "@calcom/lib";
+
 export function Tooltip({
   children,
   content,
@@ -25,7 +27,11 @@ export function Tooltip({
       onOpenChange={onOpenChange}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Content
-        className="-mt-2 rounded-md bg-gray-900  px-2 py-1 text-xs font-semibold text-white shadow-lg"
+        className={classNames(
+          side === "top" && "-mt-7 -ml-4",
+          side === "right" && "ml-2",
+          "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
+        )}
         side={side}
         align="center"
         {...props}>