From e799e74d4ea5362f11b8003ec72f1e81c6d5380c Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Fri, 19 Feb 2021 18:00:42 +0100
Subject: [PATCH] Fix `OverflowTooltip` cutting of the bottom of letters like
 "g" and "y"

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/curvy-ducks-tease.md                        |  5 +++++
 .../src/components/OverflowTooltip/OverflowTooltip.tsx | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curvy-ducks-tease.md

diff --git a/.changeset/curvy-ducks-tease.md b/.changeset/curvy-ducks-tease.md
new file mode 100644
index 0000000000..43e73f542a
--- /dev/null
+++ b/.changeset/curvy-ducks-tease.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Fix `OverflowTooltip` cutting off the bottom of letters like "g" and "y".
diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
index 9bbe7aeb81..faf064f9f4 100644
--- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
+++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Tooltip, TooltipProps } from '@material-ui/core';
+import { makeStyles, Tooltip, TooltipProps } from '@material-ui/core';
 import React, { useState } from 'react';
 import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
 
@@ -26,8 +26,15 @@ type Props = {
   placement?: TooltipProps['placement'];
 };
 
+const useStyles = makeStyles({
+  container: {
+    overflow: 'visible !important',
+  },
+});
+
 export const OverflowTooltip = (props: Props) => {
   const [hover, setHover] = useState(false);
+  const classes = useStyles();
 
   const handleToggled = (truncated: boolean) => {
     setHover(truncated);
@@ -43,6 +50,7 @@ export const OverflowTooltip = (props: Props) => {
         text={props.text}
         line={props.line}
         onToggled={handleToggled}
+        containerClassName={classes.container}
       />
     </Tooltip>
   );